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

Question

When developing a QuickApp, 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>

How do I use the border radius CSS feature within a quick app button.

Answer 1

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;
}