Sexy CSS3 Buttons

by tarabaskara on Apr 06, 2011 | 3 Comments
sexy_button

Creating buttons using a CSS3-based method becomes easier. I read a great tutorial at ZURB who made super awesome CSS3 buttons. I have taken their example and tweaked a bit to make this tutorial.

The Button
This is the main structure of my button set. It made by a border, border-radius, box-shadow, and text-shadow. Here’s the CSS code:

[CC lang="CSS"]
.button{
position: relative;
padding: 6px 8px;
color: #FFFFFF;
font-family: Helvetica;
text-decoration: none;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.3);
border-bottom: 1px solid rgba(0,0,0,0.3);
cursor: pointer
}
[/CC]

 

The Sizes
After we made the .button class, we can setup some instances of size. In this tutorial I have set the classes .small, .medium, and .large.

[CC lang="CSS"]
.large{
padding: 8px 14px;
font-size: 24px;
}
.medium{
font-size: 18px;
}
.small{
font-size: 12px;
}
[/CC]

 

The Colors
The final step is to add some colors.
[CC lang="CSS"]
.red{
background: -webkit-gradient(linear, left top, left bottom, from(#FF0012), to(#E50010));
background: -moz-linear-gradient(top, #FF0012, #E50010);
}
.red:hover{
background: -webkit-gradient(linear, left top, left bottom, from(#E50010), to(#BC000D));
background: -moz-linear-gradient(top, #E50010, #BC000D);
}
[/CC]

 

And there you have it. A sexy button using CSS3-based method. You can download the final coded example here.

Back to top

3 Responses to “Sexy CSS3 Buttons”

  1. hey good i was lookin for this code!

  2. uceng says:

    pak tara, link buat download the final code example-nya ga found katanya..
    huhu.. T.T

Leave a Reply