Do you know you can create beautiful looking 3D press-able buttons with pure CSS3?
Button press effect can be achieved by using box-shadow property. The box-shadow property describes one or more shadow effects as a comma-separated list. It enables you to cast a drop shadow from the frame of almost any element.
HTML For 3D Pressable Button
<a class="press-button" href="#">Pressable Button</a>
CSS For 3D Pressable Button
.press-button{
background-color: #28a4c9;
border-radius: .5em;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
inset 0 2px 0 hsla(0,0%,100%,.1),
inset 0 -0.2em 0 hsla(0,0%,100%,.1),
inset 0 -0.25em 0 hsla(0,0%,0%,.25),
0 0.25em 0.25em hsla(0,0%,0%,.05);
color: #fff;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 1em;
font-weight: bold;
line-height: 1.5;
margin: 0 .5em 1em;
padding: .5em 1.5em .75em;
text-decoration: none;
}
.press-button:active {
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.2),
inset 0 2px 0 hsla(0,0%,100%,.1),
inset 0 0 0 3em hsla(0,0%,100%,.2),
inset 0 0.25em 0.5em hsla(0,0%,0%,.05),
0 -1px 1px hsla(0,0%,0%,.1),
0 1px 1px hsla(0,0%,100%,.25);
margin-top: .25em;
outline: none;
padding-bottom: .5em;
}
You can play around and change the styles of the button to your liking. Here are some suggestions:
- To change color of the button:
background-color - To change color of the text:
color - To change rounded border of the button:
border-radius
