Pumpkins n' Pies

Fun with Buttons - Part Two

Part Two - Animated Buttons

Buttons with movement, smooth transitions, and general fanciness.

Calls to action, and links with emphasis, buttons are a key part of a website's navigation. Below are some example styles for your inspiration, along with the CSS that makes them pretty.

All of these buttons are div elements wrapped in links. The div gives us the ability to add top and bottom padding, and make the link look more button-like.

Animated Button - "Realistic" Button

Sometimes its nice to be literal. These buttons look like their real-world keyboard counterparts, and have a nice "pressed" animation when the mouse overs over them.

This is accomplished by a very complicated box shadow. Each of the lines in the box-shadow code is a separate shadow - each a little bit darker than the last to give a gradual fading shadow.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1688'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1688 {
background-color: #AD665C;
color: #fffff7;
padding: 17px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
margin-bottom: 10px;
border-radius: 3px;
box-shadow: 
    inset 0 1px 0 0 #A35B52,
    0 1px 0 0 #95544B,
    0 2px 0 0 #935148,
    0 4px 0 0 #8e4d44,
    0 5px 0 0 #894940,
    0 6px 0 0 #82443b,
    0 6px 7px 0 #7a3f37;

}
#button-example-1688:hover {
transform: translateY(3px);
box-shadow: 
    inset 0 1px 0 0 #A35B52,
    0 1px 0 0 #95544B,
    0 2px 0 0 #8e4d44,
    0 3px 0 0 #82443b,
    0 4px 6px 0 #7a3f37;

}

Animated Button - Appearing Icon

A FontAwesome icon (or other icon of your choice) appears on hover, prompting the user to click and continue on to the next page or bit of content. Its a nice way to include a bit of fun animation and interest in a professional design.

FontAwesome is a great icon library, with a lot of options. If you see an icon on a website, there's a good chance that its a FontAwesome icon. There are free versions of this library available; please note that you will need to install one on your site in order to use the icons.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1684'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1684 {
color: #fffff7; 
background: #3E5837;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
position: relative;
transition: all 0.25s linear 0s;

}
#button-example-1684:hover {
text-indent: -10px;
background: #2C3F27;

}
#button-example-1684:before {
content: "\f105";
font-family: FontAwesome;
font-size: 18px;
line-height: 68px;
position: absolute;
right: 0;
top: 0;
height: 100%;
opacity: 0;
width: 60px;
transition: all 0.25s linear 0s;

}
#button-example-1684:hover:before {
text-indent: 0px;
opacity: 1;

}

Animated Button - Color Bar with Slide on Hover

A singular bar of the color on the left of this button invites the user to click! On hover, the color slides from left to right across the button, and the color of the text changes to remain visible. Like the other slide effect button(s), most of the work is done by a box-shadow rule.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1607'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1607 {
color: #fffff7; 
background-color: #373936;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
box-shadow: inset 10px 0 0 0 #A3C09B;

-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
transition: ease-out 0.5s;

}
#button-example-1607:hover {
box-shadow: inset 200px 0 0 0 #A3C09B;
color: #373936;

}

Animated Button - Color Slides in from Left on Hover

On hover, a different color slides in from the left. Note that all the work is done by a box-shadow rule!

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1605'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1605 {
color: #fffff7; 
background-color: #2B1412;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
box-shadow: inset 0 0 0 0 #D0A7A2;

-webkit-transition: ease-out 0.5s;
-moz-transition: ease-out 0.5s;
transition: ease-out 0.5s;

}
#button-example-1605:hover {
box-shadow: inset 200px 0 0 0 #D0A7A2;

}

Animated Button - Gradient Flip

A basic rectangular button, where the gradient flips direction on hover. Unfortunately gradients don't just fade, so we are going to use a css animation to handle the smooth transition from one gradient to another.

If you look closely at the css, you'll see that "flipping" is a misnomer here. The background gradient is actually being moved back and forth quickly, achieving the desired effect.

One downside of this method is that the "HoverOut" animation will play when the page loads. But if your button is far enough down the page, nobody will ever notice! And the alternative is not having a smooth gradient to solid transition.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1683'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1683 {
color: #fffff7; 
background: #D0A7A2 linear-gradient(90deg, #2b1412 0%, #d0a7a2 40%, #d0a7a2 60%, #2b1412 100%) 0% 0% no-repeat;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
background-size: 200% 200%;
background-position: 0% 0%;
animation: HoverOut 0.15s ease 1;

}
#button-example-1683:hover {
animation: HoverIn 0.15s ease 1;
background-position: 100% 0%

}
@keyframes HoverIn { 
    0%{background-position: 0% 0%}
    100%{background-position: 100% 0%}
}

@keyframes HoverOut { 
    0%{background-position: 100% 0%}
    100%{background-position: 0% 0%}
}

Animated Button - Smooth Color Change

A basic rectangular button, where the color changes on hover. But now we have a little bit of CSS animation causing the button to transition color smoothly.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1604'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1604 {
color: #fffff7; 
background-color: #A37C40;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
-webkit-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;

}
#button-example-1604:hover {
background-color: #2B1412;
-webkit-transition: background-color 200ms linear;
-ms-transition: background-color 200ms linear;
transition: background-color 200ms linear;

}

Animated Button - Smooth Color to Gradient Change

A basic rectangular button, where the solid color changes to a gradient on hover. But gradients don't fade in gracefully, so this requires an actual css animation to power it. There is one animation that plays when the mouse hovers over the button, and another that plays when the mouse leaves the button (HoverIn and HoverOut respectively).

One downside of this method is that the "HoverOut" animation will play when the page loads. But if your button is far enough down the page, nobody will ever notice! And the alternative is not having a smooth gradient to solid transition.

HTML:

Copy to clipboard
<a href='#'><div id='button-example-1608'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1608 {
color: #fffff7; 
background: #A37C40 linear-gradient(90deg, #decfb8 0%, #decfb8 50%, #A37C40 100%) 0% 0% no-repeat;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
background-size: 200% 200%;
background-position: 0% 0%;
animation: HoverOut 0.5s ease 1;

}
#button-example-1608:hover {
animation: HoverIn 0.5s ease 1;
background-position: 80% 0%

}
@keyframes HoverIn { 
    0%{background-position: 0% 0%}
    100%{background-position: 80% 0%}
}

@keyframes HoverOut { 
    0%{background-position: 80% 0%}
    100%{background-position: 0% 0%}
}

Pumpkins n' Pies

For gluten-free baking enthusiasts and garden lovers: discover delicious, from-scratch recipes featuring sourdough, whole foods, and most importantly – pie! Explore gardening tips from east-central Illinois, along with a byte of code for fellow developers.
 © 2025 Abhishek & Miriam Chaturvedi