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 - 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 - 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 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-1608'>Click here!</div></a>

CSS:

Copy to clipboard
#button-example-1608 {
color: #fffff7; 
background: #D0A7A2 linear-gradient(90deg, #D0A7A2 0%, #D0A7A2 100%) 0% 0% no-repeat;
padding: 20px 40px;
font-size: 18px; 
font-weight: 600;
width: 200px;
text-align: center;
-webkit-transition: background 1000ms linear;
-ms-transition: background 1000ms linear;
transition: background 1000ms linear;

}
#button-example-1608:hover {
background: #D0A7A2 linear-gradient(90deg, #D0A7A2 0%, #D1B589 100%) 0% 0% no-repeat;
-webkit-transition: background 1000ms linear;
-ms-transition: background 1000ms linear;
transition: background 1000ms linear;

}

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.
 © 2024 Abhishek & Miriam Chaturvedi