How to Create CSS3 Buttons [Tutorial]
![How to Create CSS3 Buttons [Tutorial]](http://designmodo.com/wp-content/uploads/2012/01/preview.png "How to Create CSS3 Buttons [Tutorial]")
Difficulty: Beginner
Estimated completion time: 30 mins
In this tutorial we will be making some cool CSS3 buttons. They are based on the Futurico User Interface by Vladimir Kudinov and we will try to make a precise copy of them. Let’s get started…
Step 1 – HTML
The HTML is very simple, we’ll just create 3 anchor tags with the class of ‘button’ and since we will create three different colors styles we will give to each link a different color class
<a href="#" class="button green">button</a> <a href="#" class="button blue">button</a> <a href="#" class="button gray">button</a>
Step 1 Preview
Step 2 – Basic CSS Styling
Now we will start to give the basic shape and styles for the buttons. We’ll use the ‘display: inline-block’ property to be able to use it as a block element and to tolerate others HTML elements next to it. The others properties are basic CSS2 styles, you should not have difficulty to understand them.
.button {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/25px Arial, sans-serif;
}
Before getting in the CSS3 part let’s just add some basic background and text colors for each color style.
.green {
color: #3e5706;
background: #a5cd4e;
}
/* Blue Color */
.blue {
color: #19667d;
background: #70c9e3;
}
/* Gray Color */
.gray {
color: #515151;
background: #d3d3d3;
}
Step 2 Preview
Step 3 – CSS3 Styling
Let’s start the fun part! Now we’ll add the rounded corners, shadows, and basic animations. You will notice that we will use various prefixes for each browser. This is required because this properties are in tests in some browsers and we need to add prefixes to target them
.button {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/25px Arial, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255, .22);
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;
}
Step 3 Preview
Step 4 – CSS3 Background Colors
In this part we’ll add CSS3 background gradients for each color style. If you want to create more background gradients just change the colors
/* Green Color */
.green {
color: #3e5706;
background: #a5cd4e; /* Old browsers */
background: -moz-linear-gradient(top, #a5cd4e 0%, #6b8f1a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a5cd4e), color-stop(100%,#6b8f1a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* IE10+ */
background: linear-gradient(top, #a5cd4e 0%,#6b8f1a 100%); /* W3C */
}
/* Blue Color */
.blue {
color: #19667d;
background: #70c9e3; /* Old browsers */
background: -moz-linear-gradient(top, #70c9e3 0%, #39a0be 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#70c9e3), color-stop(100%,#39a0be)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* IE10+ */
background: linear-gradient(top, #70c9e3 0%,#39a0be 100%); /* W3C */
}
/* Gray Color */
.gray {
color: #515151;
background: #d3d3d3; /* Old browsers */
background: -moz-linear-gradient(top, #d3d3d3 0%, #8a8a8a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d3d3d3), color-stop(100%,#8a8a8a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* IE10+ */
background: linear-gradient(top, #d3d3d3 0%,#8a8a8a 100%); /* W3C */
}
Step 4 Preview
Step 5 – Create Big Buttons
To create the big buttons style we’ll add a ‘big’ class and a span tag with some text.
HTML
<a href="#" class="button big green">sign in <span>One minute</span></a> <a href="#" class="button big blue">sign in <span>One minute</span></a> <a href="#" class="button big gray">sign in <span>One minute</span></a>
CSS
/* Big Button Style */
.big {
padding: 0 40px;
padding-top: 10px;
height: 45px;
text-transform: uppercase;
font: bold 20px/22px Arial, sans-serif;
}
.big span {
display: block;
text-transform: none;
font: italic normal 12px/18px Georgia, sans-serif;
text-shadow: 1px 1px 1px rgba(255,255,255, .12);
}
Step 5 Preview
Step 6 – Hover and Active State
For the hover and active sate we’ll just edit the box-shadows.
Hover
.button:hover {
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 0px 0px 2px rgba(0,0,0, .5);
}
Hover State Preview
Active
.button:active {
-webkit-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
-moz-box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
box-shadow: inset 0px 0px 3px rgba(0,0,0, .8);
}
Active State Preview
Conclusion
That’s it! We’ve finished our CSS3 buttons. Hope you like it and don’t forget to live some feedback in the comments.
Want this freebie? Enter your email and get it now!
Please enter your email address below and click the download button. The download link will be sent to you by email.
Valeriu Timbuc
Valeriu is a 19 years old boy from Lisbon, Portugal. He started learning Web Design / Development one year ago and now he have some solid knowledge about it. Check out his Portfolio and don’t forget to follow him on Twitter.
Stay in Touch with Us
Sponsors
Johnny
January 30, 2012 at 4:50 pm
Great! I actually did a tutorial on CSS Buttons recently.
Nora Reed
January 31, 2012 at 12:56 pm
Great work! Thank you so much for sharing these button css! :)
sanjay
February 1, 2012 at 12:08 am
A great source to get new idea’s and very helpful in learning new technique to learn advanced label CSS3. Thanks for sharing.
Prodyot
February 1, 2012 at 8:21 am
Awesome.
Just what I was looking for to learn how to design “awesome” buttons in CSS3.
Thnaks for sharing.
James
February 2, 2012 at 1:13 pm
Great write-up!
We always try to use CSS Buttons where possible. It’s so much better for page loading times, dynamicism (Hey – a new word there!) and content management systems.
Unfortunately, some people still use IE, and worse – a lot of UK Public Sector organisations are still running IE5 or 6. This can prevent CSS from displaying as the designer intended and makes a hell of a lot more work for us folk.
When will they learn?
Valeriu
February 2, 2012 at 9:22 pm
Yeah IE sucks for Web Designers, but you can use CSS3 buttons but IE users will not see the CSS3 features (gradients, shadows, etc.) .
Mozi
February 11, 2012 at 8:25 am
Yeah as a designer I agree IE sucks :( but it is really nice work with CSS3.
Leo Costa-Leite
February 7, 2012 at 3:45 am
great tutorial, just tried it out. Freakin amazing and pretty simple if it wasn’t for all the fallbacks needed for different browsers
Daisopa
February 7, 2012 at 9:37 am
That ‘s a great tutorial ，I will be reproduced on my blog.
Agnel Waghela
February 10, 2012 at 6:48 pm
Awesome Tutorial… enjoyed making those cool CSS3 buttons… Soon I’ll use on my site…
Thank you Valeriu Timbuc very much… Expecting more of these…
Niall
February 15, 2012 at 2:53 am
Cool stuff. Useful seeing fallbacks in the code for a change!
Lil Josh
February 24, 2012 at 7:04 am
Great tutorial, very detailed. I wrote a tutorial for creating CSS3 Google buttons. Please check it out and enjoy! http://liljosh.com/css3-google-buttons/
Prince
February 26, 2012 at 12:32 am
This is completely awesome!!!!!!
I ran into issues applying this to actual buttons. Do you know how to make this work same effect for buttons?