Whether you are Web Designer or Web application Developer, You always use buttons in your projects. Its very easy now to stylize your buttons using CSS3. You can create awesome buttons by applying little bit CSS.
In this tutorial, I’ll tell you, how you can create awesome and good looking buttons in a minute.
Awesome Button
First of all I’ll tell you how to make Awesome button, We’ll apply some CSS3 Gradient Effects on the Buttons to stylize the buttons. Your Button will be ready in two steps. Firstly we write a markup and secondly we apply CSS on it.
The Simplest markup for button is
1 | <a href="#" class="button">Button</a> |
Now we’ll define CSS class button
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 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | .button { display: inline-block; white-space: nowrap; background-color: #ccc; background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc)); background-image: -webkit-linear-gradient(top, #eee, #ccc); background-image: -moz-linear-gradient(top, #eee, #ccc); background-image: -ms-linear-gradient(top, #eee, #ccc); background-image: -o-linear-gradient(top, #eee, #ccc); background-image: linear-gradient(top, #eee, #ccc); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#eeeeee', EndColorStr='#cccccc'); border: 1px solid #777; padding: 0 1.5em; margin: 0.5em; font: bold 1em/2em Arial, Helvetica; text-decoration: none; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,.8); -moz-border-radius: .2em; -webkit-border-radius: .2em; border-radius: .2em; -moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); -webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3); } .button:hover { background-color: #ddd; background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd)); background-image: -webkit-linear-gradient(top, #fafafa, #ddd); background-image: -moz-linear-gradient(top, #fafafa, #ddd); background-image: -ms-linear-gradient(top, #fafafa, #ddd); background-image: -o-linear-gradient(top, #fafafa, #ddd); background-image: linear-gradient(top, #fafafa, #ddd); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa', EndColorStr='#dddddd'); } .button:active { -moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; -webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset; position: relative; top: 1px; } .button:focus { outline: 0; background: #fafafa; } .button:before { background: #ccc; background: rgba(0,0,0,.1); float: left; width: 1em; text-align: center; font-size: 1.5em; margin: 0 1em 0 -1em; padding: 0 .2em; -moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5); -moz-border-radius: .15em 0 0 .15em; -webkit-border-radius: .15em 0 0 .15em; border-radius: .15em 0 0 .15em; pointer-events: none; } |
Here is the Result
Add Icon to the Button
We can add different icons on the button, so that it looks awesome. Note one thing, We’ll use HTML Entities instead of image because it loads faster than image. Add only one more CSS class.
1 2 3 4 | .star:before { content: "\2605"; } |
The new markup for Button with icon is
1 | <a href="#" class="button star">Favourite</a> |
we added star class along with button class
Here is the new Demo
You can use different entites to use as icon with button. Here are simple examples
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | .edit:before { content: "\270E"; } .delete:before { content: "\2718"; } .save:before { content: "\2714"; } .email:before { content: "\2709"; } .like:before { content: "\2764"; } |
You can also apply different colors like
Markup for the twitter button is
1 | <a href="#" class="button twitter">Twitter</a> |
CSS
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 30 31 | .twitter:before { content: "t"; background: #91CFD3; background: rgba(0, 0, 0, .1); color: white; font-family: verdana; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } .twitter{ background: #52c1ea; /* Old browsers */ background: -moz-linear-gradient(top, #52c1ea 0%, #71c8e2 50%, #5bc2ea 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#52c1ea), color-stop(50%,#71c8e2), color-stop(100%,#5bc2ea)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #52c1ea 0%,#71c8e2 50%,#5bc2ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #52c1ea 0%,#71c8e2 50%,#5bc2ea 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #52c1ea 0%,#71c8e2 50%,#5bc2ea 100%); /* IE10+ */ background: linear-gradient(to bottom, #52c1ea 0%,#71c8e2 50%,#5bc2ea 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52c1ea', endColorstr='#5bc2ea',GradientType=0 ); /* IE6-9 */ color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .4); } .twitter:hover{ background: #5bc2ea; /* Old browsers */ background: -moz-linear-gradient(top, #5bc2ea 0%, #29b8e5 50%, #52c1ea 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5bc2ea), color-stop(50%,#29b8e5), color-stop(100%,#52c1ea)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #5bc2ea 0%,#29b8e5 50%,#52c1ea 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #5bc2ea 0%,#29b8e5 50%,#52c1ea 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #5bc2ea 0%,#29b8e5 50%,#52c1ea 100%); /* IE10+ */ background: linear-gradient(to bottom, #5bc2ea 0%,#29b8e5 50%,#52c1ea 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bc2ea', endColorstr='#52c1ea',GradientType=0 ); /* IE6-9 */ } |
Give your feedback in the comments.
