Creating View Demo Button

The use of this css is to create a button on a blog. With this css code will make it easier to modify the button, shapes, sizes and colors of the button. This button allows you to "view demo" or "download" and other purpose on your blog, You can customize your button with the right colors that adjusted with your theme background. With this button can change appearance of your blog.

How to make the this button ? Please copy and paste the code below in your post page, do some color changes that proper with your blog theme.

<style type="text/css">
.button1 {
 color:#a8a8a8;
 font-family:arial;
 font-size:15px;
 font-weight:bold;
 padding:6px 30px;
 text-decoration:none;
 text-shadow:0px 1px 0px #000000;
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
 border-radius:15px;
 border:1px solid #8a8a8a;
 display:inline-block;
 -webkit-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 -moz-box-shadow:inset 0px 1px 0px 0px #aba9ab;
 box-shadow:inset 0px 1px 0px 0px #aba9ab;
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #7a7a7a), color-stop(1, #000000) );
 background:-moz-linear-gradient( center top, #7a7a7a 5%, #000000 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#7a7a7a', endColorstr='#000000');
 background-color:#7a7a7a;
}
.button1:hover {
 background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #000000), color-stop(1, #7a7a7a) );
 background:-moz-linear-gradient( center top, #000000 5%, #7a7a7a 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#7a7a7a');
 background-color:#000000;
}
.button1:active {
 position:relative;
 top:1px;
}
</style><a class="button1" href="your URL">View Demo</a>
<style type="text/css"></style>

Note :

• Change the blue text with your color(text will be displayed),
•  The red text with your URL.

View Demo

Download