gradient and shadow button with html5

Thanks for html5 and css 3, a beautiful button can be done by some css lines. See this button:

In this article we will learn:

• To determines how rounded the corners of the button is use border-radius: example: border-radius: 10px;
• To set a gradient background use the properties background: linear-gradient(top, #a3a3a3, #000); , the first color is the start color and the second color is the end color.
• top is the start position, it can be left, right, or bottom. You can set it to 300deg (means 300 degree) to display an angle.
• Top drop shadow, use box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
• To prevent from player from select button, please use: user-select: none;

How to do this? Here is the code css:

<style>

button

{

font-family: Arial, Helvetica, sans-serif;

font-size: 14px;

color: #fff;

padding: 10px 20px;

border: 2px solid #000;

cursor: pointer;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

background:-webkit-linear-gradient(top, #a3a3a3, #000);

background:-moz-linear-gradient(top, #a3a3a3, #000);

background: linear-gradient(top, #a3a3a3, #000);

-webkit-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);

-moz-box-shadow: 5px 5px 3px rgba(0,0,0,0.5);

box-shadow: 5px 5px 3px rgba(0,0,0,0.5);

-webkit-user-select: none;

-moz-user-select: none;

user-select: none;

}

button:hover

{

background: -webkit-linear-gradient(top, #acc7a3, #506651);

background: -moz-linear-gradient(top, #acc7a3, #506651);

background: linear-gradient(top, #acc7a3, #506651);

}

button:active

{

background: -webkit-linear-gradient(top, #858565, #c5c9a9);

background: -moz-linear-gradient(top, #858565, #c5c9a9);

background: linear-gradient(top, #858565, #c5c9a9);

}

</style>