10 Awesome CSS3 Buttons to use on your website

I created 10 awesome and beautiful buttons with CSS3 for you! There are buttons for every kind of website and I think that you will love them! Feel free to use them everywhere.

1. First Button: White-Gray

.button1{
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-box-shadow:0 1px 0 rgba(0,0,0,0.3);
-webkit-box-shadow:0 1px 0 rgba(0,0,0,0.3);
box-shadow:0 1px 0 rgba(0,0,0,0.3);
background: -moz-linear-gradient(19% 75% 90deg, #E0E0E0, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#E0E0E0));
color:#4A4A4A;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 15px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
}
.button1:hover{
background: -moz-linear-gradient(19% 75% 90deg,#D6D6D6, #FAFAFA);
background: -webkit-gradient(linear, left top, left bottom, from(#FAFAFA), to(#D6D6D6));
}

2. Second Button: Blue

.button2{
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
-moz-box-shadow:2px 2px 0 #C6E5E7;
-webkit-box-shadow:2px 2px 0 #C6E5E7;
box-shadow:2px 2px 0 #C6E5E7;
background: -moz-linear-gradient(19% 75% 90deg, #CAEAFF, #e2f2ff);
background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#CAEAFF));
color:#637897;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:10px 25px;
text-shadow:1px 1px 0 rgba(255, 255, 255, 0.7);
text-transform:uppercase;
border: 1px solid #C6E5E7;
}
.button2:hover{
background: -moz-linear-gradient(19% 75% 90deg,#C6E5FA, #e2f2ff);
background: -webkit-gradient(linear, left top, left bottom, from(#e2f2ff), to(#C6E5FA));
}

3. Third Button: Blue

.button3{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
-webkit-box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:1px 1px 2px rgba(0, 0, 0, 0.5);
background: -moz-linear-gradient(19% 65% 90deg,#0087B4, #0099CC, #0099CC 51%);
background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0087B4));
color:#f0f0f0;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
padding:10px 25px;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.5);
border: 1px solid #267ed4;
}
.button3:hover{
background: -moz-linear-gradient(19% 65% 90deg,#0082AD, #0099CC, #0099CC 51%);
background: -webkit-gradient(linear, 0% 45%, 0% 60%, from(#0099CC), to(#0082AD));
color: #f1f1f1;
}

4. Fourth Button: Orange

.button4{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);
box-shadow:0 1px 0 rgba(0, 0, 0, 0.6);
background: -moz-linear-gradient(19% 75% 90deg, #FF4D01, #FF8924);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF8924), to(#FF4D01));
color:#fff;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:15px;
font-weight:bold;
padding:8px 20px;
}
.button4:hover{
background: -moz-linear-gradient(19% 75% 90deg, #EB4701, #F58423);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F58423), to(#EB4701));
}

5. Fifth Button: Blue

.button5{
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
-moz-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);
-webkit-box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);
box-shadow:0 1px 0 rgba(0, 0, 0, 0.9);
background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#55a9e8), to(#4183D4));
color:#f0f0f0;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-weight:bold;
padding:5px 16px;
text-shadow:0 -1px 0 rgba(0, 0, 0, 0.5);
}
.button5:hover{
background: -moz-linear-gradient(19% 75% 90deg, #4183D4, #55a9e8);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#378dcd), to(#20559A));
-moz-box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;
-webkit-box-shadow: none;
box-shadow:0 0 8px rgba(0, 0, 0, 0.6) inset;
}

6. Sixth Button: Pink

.button6{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
-moz-box-shadow:0 2px 0 #b7245a;
-webkit-box-shadow:0 2px 0 #b7245a;
box-shadow:0 2px 0 #b7245a;
background: -moz-linear-gradient(0% 50% 90deg,#E22E6D, #EB3373, #EB3373 15%);
background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#EB3373), to(#E22E6D), color-stop(.9,#EB3373));
color:#fff;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:7px 20px;
text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5);
}
.button6:hover{
background: -moz-linear-gradient(0% 50% 90deg,#D62C67, #DE306D, #EB3373 15%);
background: -webkit-gradient(linear, 0% 0%, 0% 56%, from(#DE306D), to(#D62C67), color-stop(.9,#EB3373));
}

7. Seventh Color: White-Cream

.button7{
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
background: -moz-linear-gradient(19% 75% 90deg,#F0DEB8, #FDF0D1, #fff 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#F0DEB8), color-stop(.3,#FDF0D1));
color:#836d4d;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:15px;
font-weight:bold;
padding:6px 70px;
border: 1px solid #d4c198;
}
.button7:hover{
background: -moz-linear-gradient(19% 75% 90deg,#EBD9B4, #F2E6C8, #F5F5F5 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#EBD9B4), color-stop(.3,#F2E6C8));
}

8. Eighth Button: Green

.button8{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
-moz-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);
box-shadow:2px 2px 0 rgba(0, 0, 0, 0.7);
background: -moz-linear-gradient(19% 100% 90deg,#025C25, #038836, #5D9B75 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5D9B75), to(#025C25), color-stop(.2,#038836));
color:#E6F2EB;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 40px;
text-shadow:-1px -1px 1px #4F5B54;
}
.button8:hover{
background: -moz-linear-gradient(19% 100% 90deg,#025221, #037D32, #599470 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#599470), to(#025221), color-stop(.2,#037D32));
}

9. Ninth Button: Green

.button9{
-moz-border-radius:1px;
-webkit-border-radius:1px;
border-radius:1px;
background: -moz-linear-gradient(19% 50% 90deg,#55792F, #608736, #608736 0%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#608736), to(#55792F), color-stop(0,#608736));
color:#f5f5f5;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 40px;
text-shadow:0 1px 0 #000000;
border-bottom:1px solid rgba(255, 255, 255, 0.7);
border-top:1px solid rgba(255, 255, 255, 0.7);
}
.button9:hover{
background: -moz-linear-gradient(19% 50% 90deg,#486628, #4E6E2C, #4E6E2C 0%);
background: -webkit-gradient(linear, 0% 50%, 0% 51%, from(#4E6E2C), to(#486628), color-stop(0,#4E6E2C));
}

10. Tenth Button: Yellow-Gold

.button10{
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background: -moz-linear-gradient(0% 45% 90deg,#E0B324, #FAD121, #FFE678 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#FFE678), to(#E0B324), color-stop(.2,#FAD121));
color:#312f30;
float:left;
font-family:arial,helvetica,sans-serif;
font-size:17px;
font-weight:bold;
padding:10px 20px;
text-shadow:1px 1px 0 #ebd663;
}
.button10:hover{
background: -moz-linear-gradient(40% 51% 90deg,#D4A922, #EBC41F, #EDD670 100%);
background: -webkit-gradient(linear, 0% 0%, 0% 65%, from(#EDD670), to(#D4A922), color-stop(.2,#EBC41F));
}

Demo
Download

Posts from around the web
Written by: Stratos Iordanidis

Stratos Iordanidis is a 16 years old Web Designer. Works with Photoshop, Wordpress and HTML/CSS everyday! Check out Stratos' Portfolio or follow him on Twitter.

14 Comments

  1. it’s a great collection and handy, but the demo is not workin’ well :s

  2. It is quite not to clear on the demo page

    • Browsers that supporting CSS3 gradients: Google Chrome, Safari and Firefox 3.6.*

  3. Andy

    Nice but they should fallback to something usable for browsers that don’t support CSS3 e.g. any IE version.

    • I just want to give some inspiration with these CSS3 Buttons. Now, if you want to use them elsewhere, you can use more techniques for each browser.

  4. Nice post thanks. @Andy you could make two copies. Non CSS3 and CSS3.

  5. yeisson

    How can it works on IE??? i’m new at CSS and i dont know how to do it. (Button 5)

  6. aker

    excellent work! neat buttons.

  7. hey dude..
    nice post…
    infact i was searching for button makers as i wasnt able to do this on my own
    thanks 4 share

  8. farid

    Nice selection of css button, but most of them DO NOT work in IE 6/7/8, and like it or not as web developers, we got to make sure stuff work too in IE…

    • You can search and find the ways to make these buttons work properly in IE 6/7/8. On this post, I just want to give the readers an idea of CSS3 features!

  9. It’s the beginning of a new era where web designers/front-end developers can now actually design their website by just using CCS. This is a great post that will help many ppl to create nice looking buttons and show the elements of it as well. Thanks a lot for your work.

Leave a Reply