CSS breathing <button> stop text from shaking - html

Question

I have a round breathing click me button beneath, here I am using #keyframes to animate the button breathing - so far all good!
But as you can tell the click me text is shaking during the breathing animation.
Is there a way to avoid this from happening?
.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);
}
}
<button class="circle centered">Click me</button>

Answer 1

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 and opacity over properties like width or height. 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); }
}
<button class="circle centered">Click me</button>
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.

Answer 2

Problem is with the transform property you're using to centre the button. I've put a JSFiddle together using the grid property to centre the button horizontally and vertically, which stops the text shaking.
body,
html {
height: 100%;
display: grid;
}
.circle-outer {
margin: auto;
text-align: center;
}
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);
}
}
<div class="circle-outer">
<button class="circle">Click me</button>
</div>
And a working example:
https://jsfiddle.net/WebDevelopWolf/7ujm2L5v/11/