How to create attractive button step by step?

Use of CSS3 for making attractive button.

Here I try and making a attractive button:

In HTML Document:


<div>
<a href="#">Click Here</a>
</div>

I create div having a link (Name:Click Here)..Add below css:


.button
{
background-color:#e1e1e6;
width:400px;
height:100px;
border:1px solid black;
border-radius:5px;
}

I only created a box here inside which I have to create a button.


.btnred
{
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;   /*for opera and safari*/
-moz-box-shadow: 0px 9px 0px #a81515;     /*for mozilla*/
-o-box-shadow: 0px 9px 0px #a81515;      /*for opera*/
-ms-box-shadow: 0px 9px 0px #a81515;    /*for I.E.*/
}
I set text-decoration to none that’s why link underline is removed. After that, I set 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.

Add below css:


.btnred: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;
}

Note:-Active selector is use to select and style the active link.A link active when you click on it

This button working is that decrese box-shadow and muve the position slightly down so that appears pressing down

About the Author

avatar