CSS3 is completely changing the game for creating buttons on the web. Techniques that were once only possible with images are now easily executable with just a few lines of code. For this post we custom built six attractively styled CSS buttons for you to copy and paste right into your projects, zero attribution required.
As with anything good in CSS3, the buttons below work great in Webkit and Mozilla browsers, but various versions of IE will fall short.
A Quick Note About Semantics
The examples below are a bit heavy on HTML markup and many of them could easily be leaner. I structured them like this so that I could keep the CSS nice and separate for various parts of the button. This is so you can mix and match different portions of each of the examples below. If you implement any of these, be sure to take a close look at both the CSS and HTML to see if you can trim any fat.
Rounded Button: Two Lines
Sometimes a single line of text just doesn’t cut it. Use this button when you have a lot to say and want to cram it into a small space. For styling, I used a gradient from #99CF00 to #6DB700 and a few simple border treatments.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 50px; color: white; background-color: #99CF00;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700));
background: -moz-linear-gradient(19% 75% 90deg,#6DB700, #99CF00);
/*border styles*/
border-left: solid 1px #c3f83a;
border-top: solid 1px #c3f83a;
border-right: solid 1px #82a528;
border-bottom: solid 1px #58701b;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#99CF00), to(#6DB700))
}
.button h3 {
font-size: 20px;
line-height: 35px;
font-family: helvetica, sans-serif;
}
.button p {
font-size: 12px;
line-height: 4px;
font-family: helvetica, sans-serif;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#6DB700), to(#99CF00));
background: -moz-linear-gradient(19% 75% 90deg,#99CF00, #6DB700);
}
Red Pill
This simple but attractive red button uses heavily rounded corners to give it a pill-like shape. You'll find a background gradient from #d46d45 to #b1432a and some slight border effects on the top and bottom. Once again, the hover effect is simply an inverse effect.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 50px; color: white; background-color: #d46d45;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#d46d45), to(#b1432a));
background: -moz-linear-gradient(19% 75% 90deg,#b1432a, #d46d45);
/*border styles*/
border-top: solid 2px #e28d79;
border-bottom: solid 1px #51281f;
border-right: solid 1px #d46d45;
border-left: solid 1px #d46d45;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
}
.button p {
font-size: 25px;
line-height: 50px;
font-family: 'Trebuchet MS', sans-serif;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b1432a), to(#d46d45));
background: -moz-linear-gradient(19% 75% 90deg,#d46d45, #b1432a);
border-top: solid 2px #b1432a;
border-bottom: solid 1px #e28d79;
}
Dark Letterpress
Here I used a letterpress technique to achieve an inset look on the text. Basically all you do is make the text darker than the background and then give it a light-colored shadow. For the hover effect I just lightened up the colors a bit.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 70px; color: #171717; background-color: #4f4f4f;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4f4f4f), to(#1d1d1d));
background: -moz-linear-gradient(19% 75% 90deg,#1d1d1d, #4f4f4f);
/*border styles*/
border-top: solid 2px #8f8f8f;
border-bottom: solid 2px #1a1a1a;
border-left: solid 2px #4f4f4f;
border-right: solid 2px #4f4f4f;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.button p {
font-size: 30px;
line-height: 70px;
font-family: verdana, sans-serif;
font-weight: bold;
text-shadow: 0px 2px 3px #444;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#616161), to(#292929));
background: -moz-linear-gradient(19% 75% 90deg,#292929, #616161);
border-top: solid 2px #8f8f8f;
border-bottom: solid 2px #282828;
}
.button p:hover{
text-shadow: 0px 2px 3px #555;
}
Black Beauty
For this button, I really wanted to create something slick and classy. To accomplish this, I implemented three tricks. First, I applied some stopped gradients to give it that glossy look. Next, I applied an inner shadow, which is a great trick for adding depth and lighting effects. Finally, I applied a slight glow through the use of a text shadow. On hover, I reduce the glow and intensify the shadow.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 70px; color: #fff; background-color: #000;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2f2f2f), color-stop(.5, #1e1f1f), color-stop(.51, #0c0c0c), to(#000));
background: -moz-linear-gradient(top, #2f2f2f, #1e1f1f 50%, #0c0c0c 51%, #000);
/*border styles*/
border-top: solid 2px #555;
border-bottom: solid 2px #111;
-moz-box-shadow:inset 0 0 15px #000000;
-webkit-box-shadow:inset 0 0 15px #000000;
box-shadow:inset 0 0 15px #000000;
}
.button p {
font-size: 30px;
line-height: 70px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #888;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 50px #000000;
-webkit-box-shadow:inset 0 0 50px #000000;
box-shadow:inset 0 0 50px #000000;
}
.button p:hover {
text-shadow: 0px 0px 3px #444;
}
Blue Pill with Icon
The blue pill button combines the glossy stylings of the previous button with the shape of the red pill from above. Again I used some glossy gradients and in inner shadow, but to make things interesting I added an icon: a little pencil. The great thing about this icon is that it doesn't require any special fonts, just HTML! It's a neat little addition that can really jazz up a contact button with zero effort.
HTML
CSS
.button {
/*basic styles*/
width: 250px; height: 50px; color: #fff; background-color: #125182;
text-align: center; font-size: 30px; line-height: 50px;
/*gradient styles*/
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #125182), color-stop(.5, #1269ab), color-stop(.51, #004375), to(#00345b));
background: -moz-linear-gradient(top, #125182, #1269ab 50%, #004375 51%, #00345b);
/*border styles*/
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
}
.button p {
font-size: 30px;
line-height: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #555;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 50px #000000;
-webkit-box-shadow:inset 0 0 50px #000000;
box-shadow:inset 0 0 50px #000000;
}
.button p:hover {
text-shadow: 0px 0px 3px #888;
}
Like/Don't Like Buttons
Here I created two circular buttons meant for implementing a simple rating system. The green button signifies a positive vote and the red a negative vote. As with the last button, the icons here are purely HTML and don't require any @font-face tricks.
HTML
CSS
.green {
background-color: #00ab26;
}
.red {
background-color: #d90004;
}
.button {
/*basic styles*/
width: 100px; height: 100px; color: #fff;
text-align: center; font-size: 30px; line-height: 50px; float: left; margin-right: 20px;
/*gradient styles*/
/*border styles*/
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
/*shadow styles*/
-moz-box-shadow: 2px 3px 5px #bfbfbf;
-webkit-box-shadow: 2px 3px 5px #bfbfbf;
box-shadow: 2px 3px 5px #bfbfbf;
}
.button p {
font-size: 50px;
line-height: 100px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
text-shadow: 0px 0px 3px #888;
}
a {
text-decoration: none;
color: fff;
}
.button:hover {
-moz-box-shadow:inset 0 0 30px #444;
-webkit-box-shadow:inset 0 0 30px #444;
box-shadow:inset 0 0 30px #444;
}
.button p:hover {
text-shadow: 0px 0px 4px #fff;
}
Conclusion
I hope these buttons prove useful to you. Even if browser limitations cause some of these to be not quite implementation ready, they still provide great learning examples for some of the awesome new features of CSS3.
Leave a comment and let us know what you think!
Comments & Discussion
62 Comments
Pingback: 6 botones con CSS | Tizonsoft
Pingback: membuat tombol web elegan dengan CSS « one web studio
Pingback: 6 Useful CSS Button Recipes You Can Copy & Paste « « Big Engine Media Big Engine Media
Pingback: Web Design News & Tutorials Roundup (Apr. 2 – Apr. 9) | Pixel Deep
Pingback: 使える CSS ボタン 6種 | ewq.jp | 雑多にいろいろ
Pingback: [CSS3] 6 Useful CSS Button Recipes You Can Copy & Paste – コピペで使えるCSS3ボタン - mBlog
Pingback: Interesting links week #15 - Inside Indivirtual
Pingback: Must Read Links for Web Designers and Developers – Volume 9 | Tech King
Pingback: Botones en CSS3 listos para usar en la web | Luis Cañada - BLOG
Pingback: Creating CSS3 Buttons: Techniques, Tutorials, Tools | Splashnology
Pingback: risorse&link | Art&Me
Pingback: CSS3 New Examples and Best Practice « Jophin's Blog
Pingback: CSS button, 110 best!
Pingback: Most Hot Latest CSS And CSS3 Buttons, 110 Best Of The Best Sets !
Pingback: Student, Apple Fan, Non Dualist, Feyenoord Supporter en Webdeveloper bij Webrr » Randy van Vugt
Pingback: 30 Excellent CSS3 Buttons Tutorials & Resources | Web Design Habits
Pingback: 40 CSS3 Button Tutorials For Designers | DigitalMofo
Pingback: 35+ CSS3 Switch Lessons With regard to Creative designers |
Pingback: 40 CSS3 Button Tutorials For Designers | Android News
Pingback: 40 CSS3 Button Tutorials For Designers | Best Web Consulting company in Nashik, India with Creative and Professional Website Design, Content Management Systems, Wordpress Experts, Ecommerce SEO, and more..
Pingback: 40 CSS3 Button Tutorials For Designers
Pingback: - educationbux
Pingback: подборка уроков по созданию CSS-кнопок | Bailey's blog
Pingback: Freatured CSS3 Button Tutorials - Best of CSS3 Button