Looking for 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.
This post is part 2 in my series. Read part 1 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. 3D Button Shadow Effect
This 3D shadow effect is created by using an offset pseudo-element that returns to origin when clicked.
<!-- HTML -->
<a href="#" role="link">BUTTON</a>/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 60px;
background-color: #ff3dde;
border: 2px solid #111;
color: #111;
font-size: 24px;
font-weight: 400;
letter-spacing: 4px;
text-decoration: none;
transition: all 300ms ease-in-out;
}
/* Pseudo-element in normal state */
a::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background-color: #111;
transform: translate(8px, 10px);
transition: all 300ms ease-in-out;
z-index: -1;
}
/* Pseudo-element in active state */
a:active::after {
transform: translate(0, 0);
}
/* Button link in active state */
a:active {
background-color: #111;
color: #fff;
}2. Neumorphism Button Animation
These social icon buttons use a combination of light and dark box shadows to achieve the 3D effect. When the buttons are clicked, the box shadows disappear and are replaced with inset shadows. The cubic-bezier transition gives the buttons a bounce effect for the active animation.
Read more about cubic-bezier here.
<!-- HTML -->
<!-- This button uses icons from font awesome -->
<a href="#" role="link"><i class="fa-brands fa-tiktok"></i></a>
<a href="#" role="link"><i class="fa-brands fa-youtube"></i></a>
<a href="#" role="link"><i class="fa-brands fa-instagram"></i></a>/* CSS */
/* Button link in normal state */
a {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background: #e8e8e8;
text-decoration: none;
border-radius: 15%;
border: none;
font-size: 24px;
box-shadow: 12px 12px 16px 0 #d5dce7,
-12px -12px 16px 0 #fbfbfb,
inset 0 0 0 0 transparent;
transition: box-shadow 200ms, transform 300ms cubic-bezier(.2,2,1,1);
}
/* Icon in normal state */
i {
color: #d6d6d6;
}
/* Button link in hover state */
a:hover i {
color: #f4a0fa;
}
/* Button link in active state */
a:active {
box-shadow: 0 0 0 transparent,
0 0 0 transparent,
inset 8px 8px 12px 0px rgba(213, 220, 231, .9),
inset -8px -8px 12px 0px rgba(251, 251, 251, 0.9);
transform: scale(.9);
}3. Neon Button Animation
Most of the effects for this neon button come from the box shadow blur property. The lighting grows when hovered, then shrinks when clicked. A bright border creates the neon tube light appearance.
<!-- HTML -->
<a href="#" role="link">NEON BUTTON</a>/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 170px;
height: 40px;
padding: 8px 20px;
text-decoration: none;
font-weight: 600;
font-size: 18px;
letter-spacing: 2px;
color: #fff;
background-color: #ff78f4;
border: 3px solid #fad4f7;
border-radius: 50px;
box-shadow: 0 0 5px #ff78f4,
0 0 15px #ff78f4,
0 0 40px #ff78f4,
0 0 10px #fad4f7 inset;
transition: all 500ms ease-in-out;
}
/* Button link in hover state */
a:hover {
box-shadow: 0 0 10px #ff78f4,
0 0 30px #ff78f4,
0 0 80px #ff78f4,
0 0 20px #fad4f7 inset;
transform: scale(1.05);
}
/* Button link in active state */
a:active {
background: transparent;
border: none;
box-shadow: 0 0 10px #ff78f4;
}4. Button Slide Animation
The slide animation can be a little tricky to get right. The length and size of the text factors in to the placement of the hidden arrow in the hover state. You’ll need to adjust the transform and size properties to get everything to work correctly.
<!-- HTML -->
<!-- This button uses icons from font awesome -->
<a href="#" role="link">
<i class="last fa fa-arrow-right-long"></i>
<span class="text">Hover</span>
<i class="first fa fa-arrow-right-long"></i>
</a>/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
width: 180px;
height: 60px;
gap: 16px;
border-radius: 60px;
background: rgba(255, 64, 255, .5);
color: #fff;
font-family: sans-serif;
letter-spacing: 2px;
font-size: 18px;
text-decoration: none;
overflow: hidden;
}
/* Pseudo-element in normal state */
a::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ff40ff;
border-radius: 60px;
z-index: 1;
transition: transform 500ms ease-in-out;
}
/* Pseudo-element in hover state */
a:hover::after {
transform: translateX(65%);
}
/* Text in normal state */
span {
margin-left: -20px;
z-index: 2;
}
/* Arrows in normal state */
i {
position: relative;
transition: transform 500ms ease-in-out,
opacity 500ms ease-in-out;
z-index: 2;
}
/* Hidden arrow in normal state */
.last {
opacity: 0;
transform: translateX(250%);
}
/* Visible arrow in normal state becomes invisible in hover state */
a:hover .first {
transform: translateX(200%);
opacity: 0;
}
/* Hidden arrow in normal state becomes visible in hover state */
a:hover .last {
transform: translateX(510%);
opacity: 1;
}5. Circle Button Animation
The animation for this button is created with 2 scaling circles. The first circle shrinks on hover to reveal the white circle that grows on hover. The arrow icon element is located inside the white circle div, so it only appears in the hover state.
<!-- HTML -->
<!-- This button uses an icon from Font Awesome -->
<a href="#" role="link" class="btn">
<div class="circle"></div>
<div class="white-circle"><i class="last fa fa-arrow-right-long"></i></div>
<span class="text">Hover Me</span
</a>/* CSS */
/* Button link in normal state */
a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: row;
height: 100px;
width: 300px;
color: #ffffff;
letter-spacing: 1px;
text-decoration: none;
}
/* Circles in normal state */
.circle, .white-circle {
position: absolute;
top: 20px;
left: 30px;
height: 60px;
width: 60px;
border-radius: 100%;
border: 1px solid #fff;
}
/* Text and circles transition */
.circle, .white-circle, .text {
transition: 300ms linear;
}
/* White circle in normal state (hidden) */
.white-circle {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
transform: scale(0);
}
/* Text in normal state */
.text {
margin-left: -88px;
font-size: 16px;
z-index: 2;
}
/* Arrow in normal state (hidden) */
i {
color: black;
font-size: 20px;
}
/* Circle in hover state (scales down) */
.btn:hover .circle {
transform: scale(0);
}
/* White circle in hover state (scales up) */
.btn:hover .white-circle {
transform: scale(1);
}
/* Text in hover state (moves to the right) */
.btn:hover .text {
margin-left: -10px;
}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.
Button inspiration:
