Pumpkins n' Pies

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;

}

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