Skip to main content

CREATING A BUTTON USING PURELY CSS3

Gone are the days of using images for buttons! These days most modern browsers have access to tools such as gradients, drop shadows and rounded corners allowing us to create neat buttons using purely CSS3 and today I’ll show you how.
STEP 1: THE HTML

<a href="#" class="button">Handy HTML</a>

…this is a simple anchor tag with an assigned class name of “button”.
STEP 2: THE CSS

.button {
width: 150px;
height: 40px;
line-height: 20px;
color: white;
text-decoration: none;
font: bold 16px Verdana, Geneva, sans-serif;
display: block;
text-align: center;

/*----- background gradient -----*/
background: #014464;
background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C);
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));

/*---- border radius ----*/
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #368DBE;
border-top: 1px solid #c3d6df;

/*---- text shadow ----*/
text-shadow: 1px 1px 1px black;

/*---- box shadow ----*/
-moz-box-shadow: 0 1px 3px black;
-webkit-box-shadow: 0 1px 3px black;
box-shadow: 0 1px 3px black;
}

/*---- hover state ----*/
.button:hover {
background: #014464;
background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853));
}

/*---- clicked state ----*/
.button:active {
-moz-box-shadow: inset 0 2px 5px #02284b;
-webkit-box-shadow: inset 0 2px 5px #02284b;
box-shadow: inner 0 2px 5px #02284b;
}

I have labelled the CSS code in sections so you can clearly see what each part of the code does. Feel free to have a play around with it, change the colours or the radius on the corners for example.
You can see a LIVE PREVIEW here

Let me know if you run into any problems, enjoy!

Comments

Popular posts from this blog

75 Surprisingly Creative Facebook Timeline Covers

Now that you have shifted to “Facebook Timeline” to display you profile in a better way, get creative with it. Facebook timeline gives you a chance to turn you profile exclusive and innovative. Putting up a personal picture as cover, will only make you look outdated. You can try some exciting covers to design your very own Facebook profile in distinguished style. We have scrounged through web to pick 75 amazing Facebook Timeline covers for this list. Unique cover pictures can give your timeline a different-from-the-rest look. You can create your own creative covers picking ideas from these cool pictures listed below. If you like this article, you might be interested in some of our other articles on  Facebook Scripts, Best Facebook Apps, Best Facebook Games, and Facebook Tips You Should Check . Ekkapong Techawongthaworn Be a brand ambassador and flaunt your fanaticism for gadgets and shopping on your cover. Ekkapong Techawongthaworn Gabriel Fort A snapshot of an App...

23 Best jQuery Slideshow (Gallery)

JQuery is becoming almost every programmer’s favorite. It gives you freedom of displaying images galleries in most effective way and that too with very little coding. When slideshows have become an integral part of the websites, the importance of jQuery cannot be ignored. Its easy usability has given it’s an edge over Flash. Do you remember the days when we used to see images grouped in tables (tr / td) and once clicked they opened in a new window or pop up! Those days are gone. Now we can use awesome jQuery plugins to showcase images in far more interesting ways. Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of Slideshows provides great user experience. Checking and viewing image galleries have covered a long way in terms of development. Thanks to jQuery. Today we have come up with a power pack of  Best jQuery Slideshow Plugins , which you wo...

GMAP3 – A jQuery Google Maps Plugin For The Developers

GMAP3  is one of the finest Google Maps jQuery Plugin which uses Google Map API version 3 to create maps with the advanced features available in it.  Google themselves has simplified the efforts in adding the maps in any website, but still applying some advance features are tricky sometimes. Unlike the other Google Maps plugin, GMAP3 aims to allows many manipulation of the google map API version 3. Let me take a look on the integration part. As I said, integration Google Maps with GMAP3 is simple and all you need is adding few things to get start with it Step 1:  Add the Google Maps script before closing  </head> <script type = "text/javascript" src = "http://maps.google.com/maps/api/js?sensor=false" ></script> Step 2:  Download the GMAP3 jQuery Plugin and upload it to your server <script type = "text/javascript" src = "gmap3.min.js" ></script> Now in order to embed the Google Maps, do the followi...