Create Attractive Button Step by Step

Anoop Kr Sharma

Rate me:

4.67/5 (2 votes)

25 Aug 2013CPOL1 min read

21.8K

199

Create an attractive Button using CSS3 -Step by Step

Download example - 5.9 KB

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

HTML

<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;/*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.*/ }

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; 
}