Make Stylish Buttons with CSS3

Lets make some cool stylish buttons in CSS3.
So, before we come to CSS part, let’s code a simple button in html.

<form>
<input class="button" type="submit" value="Submit"   />
</form>

Now we let’s add some CSS styles to make this button modern.
Button one: Simple rectangle button

.button{
font-size: 16px;
background-color:#d7d7d7;
border:1px solid #b8b8b8;
padding:5px 10px;
}

It will make a button like this.

Button Two: Round corner button

.button{
font-size: 16px;
background-color:#d7d7d7;
border:1px solid #b8b8b8;
border-radius: 7px;
padding:5px 10px;
}

It will make a button like this.

Button Three: Two round corner button

.button{
font-size: 16px;
background-color:#d7d7d7;
border:1px solid #b8b8b8;
border-radius: 7px 0 7px 0;
padding:5px 10px;
}

It will make a button like this.

Button Four: Rounded corner and bottom shadow

.button{
font-size: 16px;
background-color:#d7d7d7;
border-top:1px solid #747373;
border-right:1px solid #747373;
border-bottom:3px solid #575757;
border-left:1px solid #747373;
padding:5px 10px;
border-radius: 4px;
}

It will make a button like this.

Button Five: Top rounded corner and bottom shadow

.button{
font-size: 16px;
background-color:#d7d7d7;
border-top:1px solid #747373;
border-right:1px solid #747373;
border-bottom:3px solid #575757;
border-left:1px solid #747373;
padding:5px 10px;
border-radius: 7px 7px 0 0;
}

It will make a button like this.

Button Six: Rectangle with wide left border

.button{
font-size: 16px;
background-color:#d7d7d7;
border-top:1px solid #747373;
border-right:1px solid #747373;
border-bottom:1px solid #747373;
border-left:12px solid #575757;
padding:5px 10px;
}

It will make a button like this.

Button Seven: Button with a background image

.button{
background:#d7d7d7 url(images/arrow.png) 7px no-repeat;
font-size: 16px;
padding:5px 15px 5px 30px;
border: 1px solid #888888;
border-radius: 8px;
}