title: CSS breathing <button> stop text from shaking
body: <p>I have a round breathing <code>click me</code> button beneath, here I am using <code>@keyframes</code> to animate the button breathing - so far all good!</p>
  
  <p>But as you can tell the <code>click me</code> text is shaking during the breathing animation.</p>
  
  <p>Is there a way to avoid this from happening?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) 
  }
  
  button.circle {
    --startSize: 65vh;
    --endSize: 85vh;
    width: var(--startSize);
    height: var(--startSize);
    background: teal;
    border-radius: 100%;
    animation-name: breathe;
    animation-play-state: running;
    animation-duration: 4.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
      border: none;
  
  }
  
  @keyframes breathe {
    
    0% {
      width: var(--startSize); 
      height: var(--startSize);
    }
    
    25% {
      width: var(--startSize); 
      height: var(--startSize);
    }
  
    75% {
      width: var(--endSize);
      height: var(--endSize);
    }
    
    100% {
      width: var(--endSize);
      height: var(--endSize);
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="https://www.w3schools.com"&gt;&lt;button class="circle centered"&gt;Click me&lt;/button&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>