CSS3 Simple Gradient Button

In the earlier i mentioned about CSS Animated Navigation Menu and absolutely the menu is awesome and animated. Today i'm came up with a CSS3 Simple Gradient button. A button is important in blog post. Especially download button. The button should be stylish and clickable. This button with CSS3 properties. Definitely this button will make your blog more attractive. 

Live Demo

CSS

Here i added three button css code, such as blue button, green button and red button. The button background using CSS3 gradient, it will support all browsers and you can also change the background color. 

.ot-button-blue, .ot-button-green, .ot-button-red {background: #F4F4F4;background-image: linear-gradient(bottom, #F4F4F4 0%, #ECECEC 50%);background-image: -o-linear-gradient(bottom, #F4F4F4 0%, #ECECEC 50%);background-image: -moz-linear-gradient(bottom, #F4F4F4 0%, #ECECEC 50%);background-image: -webkit-linear-gradient(bottom, #F4F4F4 0%, #ECECEC 50%);background-image: -ms-linear-gradient(bottom, #F4F4F4 0%, #ECECEC 50%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F4F4F4', endColorstr='#ECECEC',GradientType=0 );border: 1px solid #d4d4d4;border-bottom: 1px solid #bbb;-webkit-border-radius: 10px;-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;color: #000 !important;font-weight: bold;font-family: Arial;font-size: 30px;line-height: 1;padding: 18px 45px 22px;text-align: center;text-decoration: none;text-shadow: 0 1px 0 #eee;display:inline-block;margin:0 5px;}/* Blue Button Hover */.ot-button-blue:hover {background-image: linear-gradient(bottom, #0067C7 30%, #006BD6 65%);background-image: -o-linear-gradient(bottom, #0067C7 30%, #006BD6 65%);background-image: -moz-linear-gradient(bottom, #0067C7 30%, #006BD6 65%);background-image: -webkit-linear-gradient(bottom, #0067C7 30%, #006BD6 65%);background-image: -ms-linear-gradient(bottom, #0067C7 30%, #006BD6 65%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067C7', endColorstr='#006BD6',GradientType=0 );border: 1px solid #bbb;border-bottom: 1px solid #999;cursor: pointer;color:#fff !important;text-shadow:1px 1px 0 rgba(255,255,255,0.6);border-color:#c9c9c9;text-decoration:none;}/* Green Button Hover */.ot-button-green:hover {background-image: linear-gradient(bottom, #59BA55 46%, #74CB72 73%);background-image: -o-linear-gradient(bottom, #59BA55 46%, #74CB72 73%);background-image: -moz-linear-gradient(bottom, #59BA55 46%, #74CB72 73%);background-image: -webkit-linear-gradient(bottom, #59BA55 46%, #74CB72 73%);background-image: -ms-linear-gradient(bottom, #59BA55 46%, #74CB72 73%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067C7', endColorstr='#006BD6',GradientType=0 );border: 1px solid #bbb;border-bottom: 1px solid #999;cursor: pointer;color:#fff !important;text-shadow:1px 1px 0 rgba(255,255,255,0.6);border-color:#c9c9c9;text-decoration:none;}/* Red Button Hover */.ot-button-red:hover {background-image: linear-gradient(bottom, #DB0909 46%, #FF0000 73%);background-image: -o-linear-gradient(bottom, #DB0909 46%, #FF0000 73%);background-image: -moz-linear-gradient(bottom, #DB0909 46%, #FF0000 73%);background-image: -webkit-linear-gradient(bottom, #DB0909 46%, #FF0000 73%);background-image: -ms-linear-gradient(bottom, #DB0909 46%, #FF0000 73%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0067C7', endColorstr='#006BD6',GradientType=0 );border: 1px solid #bbb;border-bottom: 1px solid #999;cursor: pointer;color:#fff !important;text-shadow:1px 1px 0 rgba(255,255,255,0.6);border-color:#c9c9c9;text-decoration:none;}

HTML

Here the HTML code for the buttons. You need to add identify class to the anchor tag. Just add the following HTML code anywhere in your page.
The Blue Button:

<a class="ot-button-blue" href="http://c-lien.blogspot.com/?Iw==">Download</a>

The Green Button:

<a class="ot-button-green" href="http://c-lien.blogspot.com/?Iw==">Download</a>

The Red Button:

<a class="ot-button-red" href="http://c-lien.blogspot.com/?Iw==">Download</a>

Change # with your link. That's it..