Looking for CSS button animation inspiration?
Each week, I post a few examples of my favorite button animations on my YouTube channel and break down the HTML and CSS for you here.
Button animations add visual effects or transitions to buttons on a website page making them more interactive and engaging for users. These animations can range from simple hover effects to more complex transitions and transformations.
Some of my demos use the anchor element and some use the button element. You can swap them out depending on your use case. Choose the button element when you need an interactive element to trigger an action, and use the anchor when you need to create hyperlinks for navigation.
Learn more about the anchor element here.
Learn more about the button element here.
1. Button Aura Effect Animation
Learn how to use this button with the Elementor plugin.
To create the aura effect in this button animation, a pseudo-element is styled with a border but is hidden in its normal state. It’s also scaled up so that it appears bigger than the button element. On hover, the pseudo-element becomes visible and scales down to match the size of the button.
<!-- HTML -->
<a href="#" role="link">BUTTON</a>
/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 56px;
width: 190px;
background: #fff;
font-family: 'Montserrat', sans-serif;
color: #111;
font-size: 18px;
font-weight: 400;
letter-spacing: 1px;
text-decoration: none;
border: none;
transition: all 300ms;
}
/* Button link in hover state */
a:hover {
background: transparent;
color: #fff;
}
/* Pseudo-element in normal state */
a::after {
content: "";
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: transparent;
border: solid 3px #fff;
opacity: 0;
transform: scaleX(1.1) scaleY(1.3);
transition: all 500ms;
}
/* Pseudo-element in hover state */
a:hover::after {
opacity: 1;
transform: scale(1);
}
/* Button link in active state */
a:active {
transform: scale(.9);
}2. Button Hover Grow Effect
The hover animation for this button is a little more complicated than the others in this playlist. It uses a pseudo-element to create the growing effect from circle to button and includes an arrow icon from Font Awesome.
<!-- HTML -->
<a href="#" role="link">
HOVER ME
<i class="fa fa-arrow-right"></i>
</a>
/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
height: 56px;
width: 200px;
text-decoration: none;
color: #111;
font-weight: 600;
letter-spacing: 2px;
font-size: 18px;
transition: all 300ms;
}
/* Pseudo-element in normal state */
a::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #c3ffa1;
width: 56px;
height: 56px;
border-radius: 30px;
z-index: -1;
transition: all 300ms;
}
/* Button link in hover state */
a:hover::before {
width: 100%;
background: #b88bfc;
}
/* Icon in normal state */
i {
position: relative;
top: 0;
margin-left: 10px;
color: #111;
transform: translateX(-5px);
opacity: 0;
transition: 300ms;
}
/* Icon in hover state */
a:hover i {
opacity: 1;
transform: translateX(0);
}
/* Button link in active state */
a:active {
transform: scale(.9);
}3. Button Shadow Hover Effect
This is a really simple effect that uses an off-set pseudo-element that moves back to origin on hover.
<!-- HTML -->
<button role="button">HOVER</button>
/* CSS */
/* Button in normal state */
button {
position: relative;
height: 60px;
width: 160px;
background: transparent;
font-size: 18px;
font-weight: 400;
color: #111;
letter-spacing: 2px;
border: solid 2px black;
cursor: pointer;
}
/* Pseudo-element in normal state */
button::after {
content: "";
position: absolute;
top: 10px;
left: 10px;
background-color: #bef792;
width: 100%;
height: 100%;
z-index: -1;
transition: 300ms;
}
/* Pseudo-element in hover state */
button:hover::after {
top: 0;
left: 0;
}
/* Button in active state */
button:active {
transform: scale(.9);
transition: 200ms;
}4. 3D Flip Button Animation
This animation uses custom data attributes assigned in the HTML paired with pseudo-elements for each side of the 3D button. The transform properties help create the flip effect by rotating the elements on the X-axis during the hover state.
<!-- HTML -->
<a href="#" data-front="HOVER" data-back="HOVER"></a>
/* CSS */
/* Button link in normal state */
a {
position: relative;
height: 60px;
width: 150px;
color: #fff;
line-height: 60px;
text-align: center;
text-decoration: none;
font-family: 'Montserrat';
font-size: 18px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
/* Pseudo-elements in normal state - shared attributes */
a::before,
a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: #111;
transition: 300ms;
}
/* Front pseudo-element in normal state */
a::before {
content: attr(data-front);
background: #affc7e;
opacity: 1;
transform: translateY(0) rotateX(0);
}
/* Back pseudo-element in normal state */
a::after {
content: attr(data-back);
background: #9f43fa;
opacity: 0;
transform: translateY(-50%) rotateX(90deg);
}
/* Back pseudo-element in hover state */
a:hover::after {
opacity: 1;
transform: translateY(0) rotateX(0);
}
/* Front pseudo-element in hover state */
a:hover::before {
opacity: 0;
transform: translateY(50%) rotateX(90deg);
}5. Button Border Fill Delay Animation
The button animation for this hover effect relies on a timing delay for the border and background color. One pseudo-element is styled with the border and the other is styled with the background color, each with staggered timings.
<!-- HTML -->
<a href="#" role="link">HOVER ME</a>
/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
height: 60px;
width: 200px;
background: rgba(255, 255, 255, 0.1);
font-family: "Montserrat";
font-size: 18px;
color: #fff;
letter-spacing: 2px;
text-decoration: none;
transition: background 300ms, color 200ms;
}
/* Pseudo-elements in normal state - shared attributes */
a::before,
a::after {
content: "";
position: absolute;
top: 0;
width: 0;
height: 100%;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
z-index: -1;
transition: 500ms;
}
/* Pseudo-element in normal state - start position */
a::before {
left: 0;
}
/* Pseudo-element in normal state - start position */
a::after {
right: 0;
}
/* Pseudo-elements in hover state - shared attributes */
a:hover::before,
a:hover::after {
width: 100%;
height: 100%;
}
/* Pseudo-element in hover state - timing */
a:hover::before {
transition-delay: 0s;
}
/* Button link in hover state */
a:hover {
color: #111;
background: transparent;
transition-delay: 500ms;
z-index: 1;
}
/* Pseudo-element in hover state - timing */
a:hover::after {
background: #fff;
transition-delay: 300ms;
z-index: -1;
}6. Neon Button Animation
Most of the effects for this neon button come from the box shadows. The lighting grows when hovered then shrinks when clicked.
<!-- HTML -->
<a href="#" role="link">NEON BUTTON</a>/* CSS */
/* Button link in normal state */
a {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 16px 32px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
font-weight: 600;
font-size: 16px;
letter-spacing: 1.2px;
color: #05fcf0;
background-color: transparent;
border: 3px solid #05fcf0;
border-radius: 50px;
box-shadow: 0 0 5px #05fcf0,
0 0 15px #78fff8,
0 0 7px #b8fcfa inset;
transition: 500ms;
}
/* Button link in hover state */
a:hover {
box-shadow: 0 0 10px #05fcf0,
0 0 30px #05fcf0,
0 0 80px #78fff8,
0 0 10px #b8fcfa inset;
transform: scale(1.05);
}
/* Button link in active state */
a:active {
border: none;
box-shadow: 0 0 10px #78fff8;
}7. Layered Click Animation
This is a simple animation that uses pseudo-elements to create the layered effect.
<!-- HTML -->
<link href="https://fonts.googleapis.com/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<a href="#" role="link">CLICK ME</a>
<!-- Inspo from https://dribbble.com/shots/9274893-Button-Hover-Interaction -->/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 150px;
background: #fff;
color: #111;
font-family: "Chivo Mono", monospace;
font-size: 18px;
letter-spacing: 2px;
text-decoration: none;
border: solid 2px #111;
cursor: pointer;
transition: all 500ms;
}
/* Pseudo-elements in normal state - shared properties */
a::after,
a::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #fff;
border: solid 2px #111;
transition: all 500ms;
z-index: -1;
}
/* Pseudo-element in normal state */
a::after {
translate: 5px 5px;
}
/* Pseudo-element in normal state */
a::before {
translate: 10px 10px;
}
/* Pseudo-elements in active state */
a:active::after,
a:active::before {
translate: 0 0;
}
/* Button link in active state */
a:active {
background: #111;
color: #fff;
}Final Thoughts
Feel free to use my code as is, or play around with the different properties to create a button that fits your website aesthetic. Experiment with the colors, adjust the transition speeds, and make it yours!
The beauty of CSS lies in its flexibility, allowing you to level-up your website templates to fit your brand identity.
Remember, if you encounter any challenges or have questions along the way, feel free to drop them in the comments below. I’d love to see your work, and I’m here to help!
If you want to learn about HTML and CSS, check out the tutorials at W3School.
