Hey fellow creators
You'd like to add a button with a pulse animation to your app? You can learn how to do it in CSS in less than a minute!
1. Create a button
This is a really simple step, but create a button in your HTML file:
<button>Go</button>
2. Let's style the button
Center the button as well as the text inside it, and make it a circle:
body{
font-family: Arial, Helvetica, sans-serif;
background: #333;
}
button{
position: absolute; /* centering */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex; /* centering the content */
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border-radius: 50%; /* make it a circle */
font-size: 20px;
border: none;
cursor: pointer;
}
3. Create the pseudo-element.
Some are using box-shadow to achieve that stuff, me included before I knew it was bad for performance.
So I simply replaced box shadow by a pseudo-element that grows and disapears at the same time with the performant "transform" and "opacity" properties.
button::after {
content: '';
display: block;
position: absolute;
z-index: -1; /* behind the parent */
width: 100%;
height: 100%;
border-radius: 50%;
background: #f1f1f1;
top: 0;
left: 0;
animation: pulse 1.4s infinite ease-out; /* animation configuration */
}
Create the keyframe:
@keyframes pulse {
to {
transform: scale(1.4);
opacity: 0;
}
}
And, there you go, the pseudo element will expand and hide at the time, thus creating what we want, with good performance (no repaint). 🔥
Come and take a look at my Youtube channel: https://www.youtube.com/c/TheWebSchool
See you soon!
Enzo.
Top comments (0)