title: How to achieve button-click effect on mobile with just css
body: <p>With code below, when tapping the sample element, the sample will go big and then go small, it's nice.
  But the question is, when I tap the sample element twice, the effect will only show once.<br>
  I know that's because the sample element is still focused, so the animation is not triggered.<br>
  I want to solve this with just css, what should I do?</p>
  
  <pre class="lang-css prettyprint-override"><code>.sample:hover, .sample:focus {
    animation: phoneButtonEffect 0.2s linear;
  }
  @keyframes phoneButtonEffect {
    50% {
      transform: scale(1.1)
    }
    100% {
      transform: scale(1)
    }
  }
  </code></pre>