How to Create Image less CSS or CSS3 "Button" .:: My Blogger Trick

How to Create Image less CSS or CSS3 "Button"

Here I am showing the trick how to create image less button with css and css3 with hover effect

1. CSS3 Button

1. Paste Css Style code below <head> tag:

.mmkbutton {
-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;
}.mmkbutton: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;
}.mmkbutton:active {
position:relative;
top:1px;
}
/* This imageless css button was generated by Www.mmktricks.blogspot.Com */

2. Paste this code where you want:

<a href="ADD URL" class="mmkbutton">BUTTON</a>

if want to open link in new tab or new window just use this code

<a href="ADD URL" target="_blank" class="mmkbutton">BUTTON</a>

2. CSS Button

1. Paste Css Style code below <head> tag:

.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;
/* This imageless css button was generated by Www.mmktricks.blogspot.Com */

2. Paste this code where you want :

<a href="ADD URL" class="button">BUTTON</a>

if want to open link in new tab or new window just use this code

<a href="ADD URL" target="_blank" class="button">BUTTON</a>

This Css3 code doesn't work in IE7
Use mozilla Firefox or Google Chrome

1. Change BUTTON with your link name
2. Change ADDURL with your link

.:: If any suggestion / Question please leave a comment below ::.

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Subscribe To Get Latest Tricks On Email!

5 comments:

HarikeshFebruary 6, 2013 at 9:16 PM
Can i get Your blockquote style
annaDecember 8, 2016 at 3:17 AM
This is a really good collection, a great resource for inspiration. Several are wonderful. http://awriter.org/
Kam Log.November 16, 2018 at 5:15 AM
It's nice that I found this blog.
London Escorts