CSS breathing <button> stop text from shaking
Perhaps a better way to animate this would be to use transform: scale(...)
on the ::after
pseudo-element. Using this method we get the following benefits:
- The animation no longer affects document flow1. When animating, prefer
transform
andopacity
over properties likewidth
orheight
. The latter will affect the elements around it (the document flow). Transforms are purely visual - they have no affect on other elements in terms of placement, which means improved performance. - The text is separate from the animation which means no more shakiness.
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
button.circle {
width: 65vh;
height: 65vh;
border: 0;
background-color: transparent;
}
button.circle::after {
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: '';
display: block;
background: teal;
border-radius: 100%;
animation: breathe 4.5s ease infinite alternate running;
}
@keyframes breathe {
from { transform: scale(1); }
to { transform: scale(1.4); }
}
<a href="https://www.w3schools.com"><button class="circle centered">Click me</button></a>
Note: Browser support for this method
1. I realize the button is centered and positioned absolute
which means it isn't affecting document flow to begin with. That said, this method of animating with transforms is more flexible for either scenario.