To make your website more beautiful, you will have to make up each element beautiful with CSS. Button is one of them. in this tutorial, i would like to demonstrate how to create a nice button with  shadow effects when hover on it,that too with an transition effect.

This is a button


Here is the Html code for above button.

<button class="ui-button" tabindex="0">This is a button</button>

<button><button>

This is the markup tag for creating a button in html.
And we assign a class for that button so we can call that class in our css for making it more beautiful

tabindex="0"
This property is set if there are many elements that a user can navigate with the tab key in keyboard.
the next button's tabindex will be set as
tabindex="1" and so on.

And now here is the CSS code used for above button.

<style type='text/css'>

button.ui-button {
background: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#F1F1F1));
-webkit-border-radius: 2px;
-webkit-transition: all 0.2s;
-webkit-box-sizing: content-box;
-webkit-box-align: stretch;
-webkit-user-select: none;
}

button.ui-button {
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
color: #222;
cursor: pointer;
height: 27px;
padding: 0 10px;
line-height: 26px;
margin: 0;
text-align: center;
box-sizing: content-box;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
position: relative;
}

button.ui-button:hover {
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0;
background: -webkit-gradient(linear, left top, left bottom, from(#F8F8F8), to(#F1F1F1));
}
button.ui-button:hover {
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.2);
color: #222;
text-decoration: none;
}

</style>