How To Create CSS3 Buttons with Gradients

For this tutorial I thought we’d create a nice looking button, using some simple css3.

Here’s the button we will be creating.

web courses bangkok learn web design design button in css & html

The first thing we need is some html, so we create a very simple base html doc. We are only creating the bare bones for the purposes of this tutorial. Create your html5 doctype and char set meta tag, html opening and closing html tags, then your opening and closing head tags. Within your head tags add your opening and closing title tags, and a suitable title. next add your opening and closing body tags. Between these two tags is where we will place all our content to be viewed. Add one <a href="#">My CSS3 Button</a>

Your document should now look something like this:

CSS3 button loveliness<a title="sexy css3 button" href="#">CSS only button!</a>

This is all we need for now for the html. Now onto styling our buttons with the css. Just after your closing head tag add the following code, well look at it first, then i’ll explain:

 

Ok, lets break down the css. Firstly we add our standard a link styles, nothing special going on here, our font-family, padding for the button, colour of the text. The only slightly unusual css property is the display:inline-block all we’re are doing with this property is telling the browser, “Hey, treat this element as if it were a block element (but inline)…this lets us give it some margin, where as any inline elements normally can’t have any margin. We could have wrappeed the link in a span and styled it, but by using display:inline-block we are saving ourselves from adding extra markup to our html thus keeping it cleaner.

font-family: Trebuchet ms;   			
font-weight:bold;						
padding:10px 20px;						
text-decoration:none;					
color:#fff;
display: inline-block;

Next for the button gradient. Here, we are setting the background colour (this is for people viewing the page on a non css3 browser). Then we go through the various browsers setting the gradient colours. You can see we specify which type of gradient linear and the start and ending points and colours from(rgb(160, 200, 40)), to(rgb(111, 139, 24)) Here is a great online tool to generate your gradients with, that out puts all the css for you! www.colorzilla.com/gradient-editor

background-color: #a0c828;
		background: -webkit-gradient(linear, left top, left bottom, from(rgb(160, 200, 40)), to(rgb(111, 139, 24)));
		background: -webkit-linear-gradient(top, rgb(160, 200, 40), rgb(111, 139, 24));
		background: -moz-linear-gradient(top, rgb(160, 200, 40), rgb(111, 139, 24));
		background: -o-linear-gradient(top, rgb(160, 200, 40), rgb(111, 139, 24));
		background: -ms-linear-gradient(top, rgb(160, 200, 40), rgb(111, 139, 24));
		background: linear-gradient(top, rgb(160, 200, 40), rgb(111, 139, 24));
		filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#a0c828', EndColorStr='#6f8b18'); /* This is for IE...yuk! */
		border: solid 1px #6f8b18;

Next we add our box shadow, to give our button a bit of depth:

box-shadow: 0px 0px 1px 1px #333;
-webkit-box-shadow: 0 1px 1px #333;
-moz-box-shadow: 0 1px 1px #333;

we then round the corners of our button:

-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px;

and finally we add a text shadow to the text contained in the button:

-text-shadow: 0px -1px 1px #333;

Check it in your browser and admire your handy work! you could also try giving you a links classes and adding the style on the class, for a more flexible button. Also, try reversing your gradient for the a:hover state, for a nice rollover effect.

web courses bangkok learn web design design button in css & html

web courses bangkok learn html&css css3 button tutorial

web courses bangkok learn html & css css3 button tutorial

web courses bangkok learn html&css css3 button tutorial

Want to learn how to make a css3 button like this?

If you are interested in learning to design css3 button like this then please contact us here

  • Bill

    I tried it.It was exciting. CSS3 is developing really fast