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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .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)); } |










![[CLOSED] Giveaway: 1 iPod Touch to be won!](http://www.markedlines.com/wp-content/uploads/2010/10/ipodtouch/ipodtouch.jpg)
![[CLOSED] Giveaway – 3 Premium Tutsplus Accounts to be won!](http://www.markedlines.com/wp-content/uploads/2010/07/tutsplusgiveaway/tutsplus.jpg)





Not working in IE.
Of course, some IE versions don’t support CSS3
Awesome, give me your permission to use these button
You can freely use these buttons.
Thank you stratos.
Thanks a lot for this nice buttons.
But how can i integrate them into my webpage ?
Regards,
Use my code into your css!
I’m from china,Thank your css
Thanks for providing the complete CSS code here. I will use these buttons on my blog.
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#0099CC’, endColorstr=’#0087B4′);
use that for IE