CSS: Creating Beautiful Buttons with Hovering Effect

The CSS Buttons are most commonly used in websites, because of their unique features such as Hovering Effect, Color settings, borders, opacity etc. Buttons have vital role in attracting users. So they should be designed properly. Here i'm going to explain step by step about how to create Stylish Beatiful and attractive buttons using CSS.

Step 1:
Simply Create a DIV using >div< tag and give an id or class name.
Step 2:
Now just create a simple css style code that points out your button's style.
Step 3:
Also create another css style that sets the style of button during Mouse Hover.
Step 4:
Now you can define your own styles one by one to each of them.
Step 5:
To Create a border, Use the following code:
border:style top right bottom left color;
where,
style can be one of the following: solid, dotted, dashed
color is color name or color-code
remaining 4 are thickness of border in 4 sides.
Step 6:

Click Me!!

<style> .btn{ height:15px;width:100px; margin:2px; padding:3px; border:solid black 2px; border-radius:3px; box-shadow:2px 2px 2px silver; background-color:silver;} .btn:hover{ background-color:#CCFFAA; height:25px;width:90px;} </style> <div class="btn">Click Me!!</div>