Pure CSS and CSS3 Buttons. No Images

Rate this Post:

{[['

']]}

Buttons are created by using images may take time to load images and hence increase the total load time of the website or blog. Today i am going to share Pure CSS Buttons with Hover Effect.

CSS Button:

Paste this Code above/before ]]></b:skin> for Blogger, or Below <head> for any other platform.

.button{
background:#008000;
-moz-box-shadow: 0px 1px 50px 0px #C11B17;
-webkit-box-shadow: 0px 1px 50px 0px #C11B17;
box-shadow: 0px 1px 50px 0px #C11B17;
color:#fff;
font-size:20px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 0px 21px #fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:5px 30px;
margin:0px;
}
.button:hover{
background:#720404;
-moz-box-shadow: 0px 1px 40px 0px #54c571;
-webkit-box-shadow: 0px 1px 40px 0px #54c571;
box-shadow: 0px 1px 40px 0px #54c571;
color:#FFF380;
font-size:20px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 0px 21px #FFF380;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
padding:5px 30px;
margin:0px;
}
.button:active {
position:relative;
top:1px;
}

Now what you have to do is add this code where you want to show the Button. i.e. in the Post

<a href=”#” class=”button”>Click Here</a>

CSS3 Button:

Paste this Code above/before ]]></b:skin> for Blogger, or Below <head> for any other platform.

.newbutton {
-moz-box-shadow: 0px 1px 0px 0px #900000;
-webkit-box-shadow: 0px 1px 0px 0px #900000;
box-shadow: 0px 1px 0px 0px #900000;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #e37f7f), color-stop(1, #900000) );
background:-moz-linear-gradient( center top, #e37f7f 5%, #900000 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#e37f7f', endColorstr='#900000');
background-color:#e37f7f;
-moz-border-radius:11px;
-webkit-border-radius:11px;
border-radius:11px;
display:inline-block;
color:#ffffff;
font-family:arial;
font-size:11px;
font-weight:bold;
padding:5px 30px;
text-decoration:none;
text-shadow:1px 0px 21px #ffffff;
}
.newbutton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #900000), color-stop(1, #e37f7f) );
background:-moz-linear-gradient( center top, #900000 5%, #e37f7f 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#900000', endColorstr='#e37f7f');
background-color:#900000;
}
.newbutton:active {
position:relative;
top:1px;
}