In this trick, we are going to create an attractive Button and give it a feel like a 3D button.
Let's Start
HTML Document Structure
<div class="box">
<a href="#" class="red">Click Here</a>
</div>
Here I create a div container having a link (named: Click Here).
CSS
.box
{
background-color:#e1e1e6;
width:400px;
height:100px;
border:1px solid black;
border-radius:5px;
}
Here I set .box background color, etc. This step is not so important. I only created a box here inside which I have to create a button.
Preview
CSS
.red
{
position:relative;
top:36px;
left:35%;
text-decoration:none;
color:#fff;
background:#cb2727;
text-align:center;
padding:20px 30px;
width:115px;
border-radius:5px;
border:solid 1px #ec3838;
transition: all 0.1s;
-webkit-box-shadow: 0px 9px 0px #a81515;
-moz-box-shadow: 0px 9px 0px #a81515;
-o-box-shadow: 0px 9px 0px #a81515;
-ms-box-shadow: 0px 9px 0px #a81515; }
Firstly, I set Position of button inside my div container (.box).
I set text-decoration to none so that link underline is removed. After that, I adjusted color and background-color. Then, I set text-align and padding. The important step here is transition and box-shadow.
- CSS3 transitions are effects that let an element gradually change from one style to another.
Preview
CSS
.red:active
{
-webkit-box-shadow: 0px 2px 0px #a81515;
-moz-box-shadow: 0px 2px 0px #a81515;
-o-box-shadow: 0px 2px 0px #a81515;
-ms-box-shadow: 0px 2px 0px #a81515;
position:relative;
top:43px;
}
The :active selector is used to select and style the active link. A link becomes active when you click on it.
The main trick behind this button’s working is that decrease box-shadow and move the position slightly down so that appears pressing down.
Preview
Browser Support
How It Looks During Clicking
That's all. Hope you like it.
Thanks.
My Other Post (Tips and Tricks)
