Quick Apps - A Button Implemented by the Input Element Does Not Respond When Tapped

After setting the type of the input element to button and setting the border-radius attribute, the button does not respond as expected (background color change) when it is tapped. If the border-radius attribute is deleted, the button works correctly again.

	<template>
	<div class="page-wrapper">
	<input type="button" class="button" value="Animation" />
	</div>
	</template>
	<script>
	</script>
	<style>
	.page-wrapper {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.button {
	color: #20a0ff;
	background-color: red;
	padding: 10px 20px;
	border-radius: 40px;
	}
	</style>

view raw button.ux hosted with ❤ by GitHub

After setting the border-radius attribute, the tap effect cannot be automatically implemented due to limitations at the bottom layer of Quick App Engine

After setting the border-radius attribute, you can use a pseudo-class of the quick app to implement the button tap effect.

.button:active{
  background-color: green;
}

So the full code now looks like

	<template>
	<div class="page-wrapper">
	<input type="button" class="button" value="Animation" />
	</div>
	</template>
	<script>
	</script>
	<style>
	.page-wrapper {
	flex-direction: column;
	justify-content: center;
	align-items: center;
	}
	.button {
	color: #20a0ff;
	background-color: red;
	padding: 10px 20px;
	border-radius: 40px;
	}
	.button:active{
	background-color: green;
	}
	</style>

view raw button.ux hosted with ❤ by GitHub