Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
I hand picked ten amazing CSS3 buttons from net which are totally cool and easy to user just like all my other tutorials. By the way because of my template you'll see all button font in orange color which is not their real color but they are just like you can see in above pic.
Button #1 :
Paypal
HTML :
<a href="#" Class="buttonPaypal" >Paypal</a>CSS :
.buttonPaypal {
display: inline-block;
background: #fedc9a;
-webkit-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
-moz-box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
box-shadow: 0px -2px 2px -1px #fef0c7 inset, 0px 2px 5px -2px #000, 0px -15px 1px 0px #ffab2b inset, 0px 5px 10px 0px #fff inset;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 1px 1px 1px #ffffff;
padding: 5px 20px;
margin: 5px 5px;
border-color: #ffab2b;
border-width: 1px;
border-style: solid;
text-align: center;
font-size: 14px;
color: #003366;
font-weight: bold;
text-decoration: none;
}
Button #2 :Fast
HTML :
<a href="#" Class="buttonFast" >Fast</a>
CSS :
.buttonFast {
display: inline-block;
background: #EEEEEE;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#697680), color-stop(50%,#3d3d3d), color-stop(50%,#292929), color-stop(100%,#171717));
background: -moz-linear-gradient(center top, #697680 0%, #3d3d3d 50%, #292929 50%, #171717 100%);
-webkit-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
-moz-box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
box-shadow: 0px 1px 0px 0px #949494 inset, 0px -1px 5px 0px #757575 inset;
-webkit-border-radius: 28px 8px 28px 8px;
-moz-border-radius: 28px 8px 28px 8px;
border-radius: 28px 8px 28px 8px;
padding: 0px 20px;
display: block;
border-color: #000000;
text-decoration: none;
border-width: 1px;
width:50px;
border-style: solid;
text-align: center;
font-family: Lucida Grande;
font-size: 14px;
line-height: 34px;
color: #FFFFFF;
font-weight: bold;
font-style: italic;
}
.buttonFast:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffae24), color-stop(50%,#ff7600), color-stop(50%,#ff6900), color-stop(100%,#ff7600));
background: -moz-linear-gradient(center top, #ffae24 0%, #ff7600 50%, #ff6900 50%, #ff7600 100%);
-webkit-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
-moz-box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
box-shadow: 0px 1px 0px 0px #ffae42 inset, 0px -1px 5px 0px #ffd200 inset;
text-shadow: 0px 0px 3px #ffeedd;
border-color: #8a0000;
}
.buttonFast:active {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd213), color-stop(100%,#ffef24));
background: -moz-linear-gradient(center top, #ffd213 0%, #ffef24 100%);
-webkit-box-shadow: 0px 1px 3px 0px #d2b400 inset;
-moz-box-shadow: 0px 1px 3px 0px #d2b400 inset;
box-shadow: 0px 1px 3px 0px #d2b400 inset;
text-shadow: 1px 1px 2px #ae7600;
border-color: #a17600;
line-height: 33px;
color: #ffffd2;
}
Button #3 :
Tweet Button
HTML :
<a href="#" Class="buttonTweet" >Tweet Button</a>
CSS :
.buttonTweet {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#d6e7f0));
background: -moz-linear-gradient(center top, #FFFFFF 0%, #d6e7f0 100%);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px #FFFFFF;
padding: 0px 8px;
border-color: #a4cce5;
border-width: 1px;
border-style: solid;
font-size: 14px;
color: #186487;
font-weight: bold;
text-decoration: none;
}
.buttonTweet:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f2f8fc), color-stop(100%,#c1e0ed));
background: -moz-linear-gradient(center top, #f2f8fc 0%, #c1e0ed 100%);
border-color: #53a3d6;
color: #133e58;
}
.buttonTweet:active {
background: #cee5f4;
text-shadow: 1px 1px 0px #e5f0f7;
border-color: #7ab8df;
color: #658a9d;
}
Button #4 :
Select An iPhone
HTML :
HTML :
HTML :
Upload
HTML :
Button #8 :
Bookmark Us
HTML :
Button #9 :
Push
HTML :
Button #10 :
Happy
HTML :
Select An iPhone
HTML :
<a href="#" Class="buttonApple" >Select An iPhone</a>CSS :
.buttonApple {
background-color: rgba(18,127,210,1);
background-image: -webkit-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
background-image: -moz-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
background-image: -ms-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
background-image: -o-linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
background-image: linear-gradient(top, rgba(54,168,234,1) 0%,rgba(18,127,210,1) 100%);
-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 1px 0px 0px 0px rgba(255,255,255,0.4)inset, -1px 0px 0px 0px rgba(255,255,255,0.4)inset;
border: solid 1px rgba(3,94,163,1);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
width: 210px;
display: inline-block;
font-size: 16px;
text-decoration: none;
line-height: 40px;
text-align: center;
color: rgba(255,255,255,1);
text-shadow: 0px 1px 1px rgba(0,0,0,0.33)
}
.buttonApple:hover {
background-image: -webkit-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
background-image: -moz-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
background-image: -ms-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
background-image: -o-linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
background-image: linear-gradient(top, rgba(47,144,213,1) 0%,rgba(3,81,183,1) 100%);
-webkit-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
-moz-box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
box-shadow: 0px 1px 0px 0px rgba(255,255,255,0.4)inset, 0px -1px 0px 0px rgba(255,255,255,0.2)inset;
border: solid 1px rgba(0,52,129,1);
}
.buttonApple:active {
background-image: none;
-webkit-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
-moz-box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
box-shadow: 0px 0px 8px 2px rgba(0,61,127,0.4)inset, 0px 0px 2px 2px rgba(0,60,125,0.2)inset;
border: solid 1px rgba(0,70,131,1);
}
Button #5 :
HTML :
<a href="#" Class="buttonApp" >Get This App</a>CSS :
.buttonApp {
background-image: -webkit-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
background-image: -moz-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
background-image: -ms-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
background-image: -o-linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
background-image: linear-gradient(top, rgba(29,149,224,1) 0%,rgba(6,103,164,1) 100%);
-webkit-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
-moz-box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
box-shadow: 0px 25px 0px 0px rgba(255,255,255,0.08)inset, 0px 0px 0px 1px rgba(255,255,255,0.3)inset;
border: solid 1px rgba(9,81,126,1);
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
width: 220px;
display: inline-block;
font-size: 21px;
line-height: 50px;
text-decoration: none;
text-align: center;
color: rgba(255,255,255,1);
font-weight: bold;
text-shadow: 0px -1px 0px rgba(0,0,0,0.66)
}
.buttonApp:hover {
background-image: -webkit-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
background-image: -moz-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
background-image: -ms-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
background-image: -o-linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
background-image: linear-gradient(top, rgba(43,165,240,1) 0%,rgba(6,103,164,1) 100%);
}
.buttonApp:active {
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
Button #6 :
Download (1.2MB)
HTML :
<a href="#" Class="buttonDownload" >Download (1.2MB)</a>
CSS :
.buttonDownload {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc930), color-stop(100%,#ffa403));
background: -moz-linear-gradient(center top, #ffc930 0%, #ffa403 100%);
-webkit-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
-moz-box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
box-shadow: 1px 1px 2px #e6e6e6, 0.5px 1px #ffd96f inset;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
text-shadow: 1px 1px 0px #b27b0d;
padding: 11px 15px;
border-color: #e39304;
border-width: 1px;
border-style: solid;
font-family: Helvetica;
font-size: 14px;
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.buttonDownload:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffd766), color-stop(100%,#ffa403));
background: -moz-linear-gradient(center top, #ffd766 0%, #ffa403 100%);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.buttonDownload:active {
-webkit-box-shadow: 1px 1px 1px 1px #ffa403 inset;
-moz-box-shadow: 1px 1px 1px 1px #ffa403 inset;
box-shadow: 1px 1px 1px 1px #ffa403 inset;
}
Button #7 :
HTML :
<a href="#" Class="buttonUpload" >Upload</a>CSS :
.buttonUpload {
background-color: rgba(76,168,0,1);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWoE2_FwE3L2aGnVjbl0PWXFJ72txaD-sHokVh9SZSKeteklCb6Am3B710no2t3aRtyj4HjcDPAS8dCzRTblo5gqp8GAYv9QL_xHTKdUAXERTUuV_BpS0AAeYyW4P0VkELsQyDwSrFr7E/s1600/upload.png');
background-repeat: no-repeat;
background-position: 106px 7px;
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
box-shadow: 0px 0px 0px 1px rgba(255,255,255,1)inset;
border: solid 1px rgba(76,168,0,1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 119px;
padding: 6px;
display: inline-block;
font-size: 13px;
text-indent: 3px;
text-decoration: none;
text-align: left;
color: rgba(255,255,255,1);
}
.buttonUpload:hover {
background-color: rgba(69,145,3,1);
}
.buttonUpload:active {
background-color: rgba(83,176,2,1);
}
Bookmark Us
HTML :
<a href="#" Class="buttonBookmark" >Bookmark Us</a>
CSS :
.buttonBookmark {
background-color: rgba(217,24,17,1);
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-bMKDQldMMz9EN7dDKDtAembfsaNLGOZg0CAQQvuNpQ7qnVMF1oRVvIIhPq9npTFH20v1Y9DhOmBcUrUgR74oHqO5u7EAlazu2_IqmohCQcepPM9YR8OCGk9ayt76iLvL2trd1qwaoqU/s1600/bookmark.png');
background-repeat: no-repeat;
background-position: 106px 7px;
-webkit-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
-moz-box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
box-shadow: 0px 0px 0px 1px rgba(240,235,235,1)inset;
border: solid 1px rgba(214,0,0,1);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 119px;
padding: 6px;
display: inline-block;
font-size: 13px;
text-decoration: none;
text-indent: 3px;
text-align: left;
color: rgba(255,255,255,1);
}
.buttonBookmark:hover {
background-color: rgba(212,11,11,1);
}
.buttonBookmark:active {
background-color: rgba(255,18,18,1);
}
Button #9 :
HTML :
<a href="#" Class="buttonPush" >Push</a>
CSS :
.buttonPush {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e80000), color-stop(100%,#9c0000));
background: -moz-linear-gradient(center top, #e80000 0%, #9c0000 100%);
-webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
-moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
-webkit-border-radius: 75px;
-moz-border-radius: 75px;
border-radius: 75px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
text-shadow: 1px 1px 0px #242424;
text-align: center;
font-family: 'K', Sans-serif;
font-size: 40px;
line-height: 150px;
text-decoration: none;
color: #ffffff;
width: 150px;
}
.buttonPush:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff0000), color-stop(100%,#9c0000));
background: -moz-linear-gradient(center top, #ff0000 0%, #9c0000 100%);
font-size: 44px;
}
.buttonPush:active {
-webkit-box-shadow: 0px 2px 0px 0px #6e006e;
-moz-box-shadow: 0px 2px 0px 0px #6e006e;
box-shadow: 0px 2px 0px 0px #6e006e;
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}
Button #10 :
HTML :
<a href="#" Class="buttonHappy" >Happy</a>CSS :
.buttonHappy {
display: inline-block;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f48f4c), color-stop(100%,#ef7d31));
background: -moz-linear-gradient(center top, #f48f4c 0%, #ef7d31 100%);
-webkit-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
-moz-box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
box-shadow: 0px 10px 0px 0px #800000, 0px -1px 0px 0px #ad4b4b inset, 0px 10px 15px 5px #adadad;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
transition: all 0.1s linear;
text-shadow: 1px 1px 0px #242424;
text-align: center;
text-decoration: none;
font-family: 'K', Sans-serif;
font-size: 40px;
line-height: 150px;
color: #ffffff;
width: 150px;
}
.buttonHappy:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79b5e), color-stop(100%,#ef7d31));
background: -moz-linear-gradient(center top, #f79b5e 0%, #ef7d31 100%);
font-size: 44px;
}
.buttonHappy:active {
-webkit-box-shadow: 0px 2px 0px 0px #6e006e;
-moz-box-shadow: 0px 2px 0px 0px #6e006e;
box-shadow: 0px 2px 0px 0px #6e006e;
-webkit-transform: translateY(8px);
-moz-transform: translateY(8px);
transform: translateY(8px);
}
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
