Apr
28
2010

Gradient Buttons with CSS3

by   |  Posted in Tutorials  |  15 comments

I have been having a lot of fun messing around with CSS3 and received a lot of emails since I posted my tutorial for Creating Shadows with CSS3. I decided that putting together a quick tutorial on how to use multiple CSS3 effects at the same time to create a cool looking gradient button would show people just how amazing CSS3 is.

The only draw back to using some of these effects is that they are not 100% cross browser compatible. Check out this page in the latest versions of Firefox, Safari or Chrome to really see the effects in action.

I’m going to style an anchor tag for my button so first I need to create some HTML:

<a href="#" class="button">This is my button</a>

Now comes the fun part. Let’s start with the basic CSS necessary for our button:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	}

This is my button

Now let’s add some rounded corners:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	}

This is my button

Next comes the shadows:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	}

This is my button

And finally, the gradient:

a.button {
	border: 1px solid #ccc;
	padding: 10px 20px 6px;
	color: #999;
	text-decoration: none;
	font-size: 28px;
	line-height: 30px;
	background: #ddd;
	border-radius: 12px;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);
	text-shadow: #fff 0px 1px 1px;
	background: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc));
	background: -moz-linear-gradient(top,  #eeeeee,  #cccccc);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc');
	}

This is my button

For fun, let’s add a active effect to make the button actually look like it is being pressed when you click on it:

a:active.button {
	box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-webkit-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	-moz-box-shadow: 0px 0px 0px rgba(0,0,0,.5);
	position: relative;
	top: 1px;
	left: 1px;
	}

This is my button

About the author:

A freelance web developer living in Montreal who spends most of his time writing for this site and building Premium themes for WordPress. You can find him on Twitter @bavotasan.

Site5 Affiliate Link
If you liked this, please share it.

Tags: , , , , , , , , , , , , , , , , , ,

Short URL: http://bit.ly/aLnDDB

Discussion 15 Comments

  1. eavasi on April 28, 2010 at 1:04 pm

    css3 like WordPress3.0 hit the unknown possibilities of their new. Thanx so much!!!

  2. Greg Rickaby on April 28, 2010 at 1:07 pm

    Great tutorial! Thanks!

  3. takahahsi on April 28, 2010 at 10:11 pm

    Great but Problem with IE8

    • c.bavota on April 29, 2010 at 9:08 am

      Exactly! That is why I said to check it out in Safari, Firefox or Chrome. It doesn’t work in IE.

  4. Kristina on May 17, 2010 at 6:48 pm

    Lovely! but your gradient doesn’t show up on FF 3.5.9 (mac)… :) Shows up in Google Chrome for mac great though! Just FYI

    • c.bavota on May 17, 2010 at 8:19 pm

      You should upgrade to Firefox 3.6.3.

  5. Mike on May 21, 2010 at 1:34 pm

    Excellent – looking forward to better/more support for CSS3. Thanks for the tutorial.

  6. Deluxe Blog Tips on May 22, 2010 at 10:30 am

    Very nice button:) Thanks for sharing.

  7. Winjay on June 1, 2010 at 4:08 am

    Seems to work in Opera as well.

  8. ameenullah on June 21, 2010 at 6:44 pm

    Easy demo! :) thanxx

  9. jo on September 4, 2010 at 5:21 pm

    grr i hate IE!!! and all the dam browsers that don’t work, just means I can’t use cool things like this until all the browsers catch up… cool tutorial though :) thankx

  10. adsl fpt on January 22, 2011 at 5:51 pm

    A demo looks awesome, but seem it’s not working in IE 5.0? Could you provide any solution to use this type of CSS in older web browser version?

  11. Jimmy Nguyen on April 2, 2011 at 7:28 am

    Hi @Bavota,
    Your post’s quite amazing for me. It works well on Firefox 3.6 & Chrome. I didn’t try on IE (I got trouble with installation IE7).
    Thank alot for sharing

    Jimmy

  12. Thomas on April 29, 2011 at 5:21 am

    Wow, nice buttons! I will integrate one of them as a search button, but with hover effect. I think it would improve the appearance.
    Thank you very much!
    Bye
    Thomas

  13. Christian bertrand on May 12, 2011 at 11:45 am

    Cant wait to see every browser supporting CSS3 !
    Internet Explorer is always the last one to do so.
    There is other cool stuff about CSS3, like opacity and child for a UL list.
    Thanks for the great post.