Apr 22

Tagged in: Comments:Add

CSS3 Gradient Buttons

Last week I talked about Cross-Browser CSS Gradient. Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

button states

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Preview

The image below shows how the button will display in different browsers.

preview

Button States

  • normal state = gradient with border and shadow styles.
  • hover = darker gradient
  • active = gradient is reversed, 1px down, and darker font color as well.

button states

General Styles For The Button

The following code is the general styles for the .button class. I use em value in the padding and border-radius property to make it scalable base on the font-size. To adjust the rounded corners and button size, simply change the border-radius, font-size and padding values. For example: I can make a smaller button by decreasing the font-size and padding values (see demo).

For more details on border-radius, text-shadow, and box-shadow, read my article The Basics of CSS3.

.button {
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.button:hover {
	text-decoration: none;
}
.button:active {
	position: relative;
	top: 1px;
}

button general styles

Color Gradient Styles

The code below is the CSS styling for the orange button. The first background line is a fallback for the non-CSS3 browsers, the second line is for Webkit browsers, the third line is for Firefox, and the last line is a gradient filter that is only read by Internet Explorer.

For more details on CSS gradient, read my article Cross-Browser CSS Gradient. 

.orange {
	color: #fef4e9;
	border: solid 1px #da7c0c;
	background: #f78d1d;
	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
.orange:hover {
	background: #f47c20;
	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
.orange:active {
	color: #fcd3a5;
	background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));
	background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

button general styles

How To Use My Buttons?

Lets say you like the blue button and want to use it on your page:

  • First, copy the .button and .blue CSS (view demo source code).
  • Then, add class="button blue" to the HTML element where you want the button to be (eg. <a href="#" class="button blue">Button</a>). The CSS classes can be applied to any element such as link, p, span, div, input, button, etc.

applying

Delicious Stumbleupon Digg

Brief History of Western Typography Thoughts on CS5 @FITC Toronto 2010

Comments

Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All

There are 161 comments (+Add)

  • 161 Andrew Braithwaite http://typingincolor.com
    August 28th, 2010 at 10:46 am

    Really useful tutorial, simple and easy to use. I found it really useful. Thanks.

  • 160 Deko Web http://www.dekowebtasarim.com
    August 24th, 2010 at 12:44 pm

    Really nice tutorial, thanks for sharing…

  • 159 Dido http://funnotfun.com
    August 23rd, 2010 at 9:38 am

    Thanks for these great buttons, the only problem for me is that the text is black instead of white.
    http://funnotfun.com
    Any idea how to correct that ?
    Thanks

  • 158 Steve Piercy http://www.stevepiercy.com
    August 19th, 2010 at 4:23 pm

    @randall, @Amanda -
    http://jehiah.cz/archive/button-width-in-ie

    Do not use IE8.js with these buttons as that causes a conflict with the fix cited in the above link.

  • 157 Web design portfolio http://www.thebrisbaneline.com
    August 19th, 2010 at 4:14 am

    awesome, very handy to know!

  • 156 Craig
    August 17th, 2010 at 8:33 am

    Dreiden, you clearly have no idea. Have you ever heard the term “progressive enhancement”? Many very prominent sites are using border-radius already. It’s idiots like you who are holding the progress of the web back.

  • 155 patrick http://webtronics.bplaced.net
    August 14th, 2010 at 2:58 pm

    Really nice. It’s great what you can do with bare CSS - isn’t it? Actually it would have been a bit better with the use of CSS transitions. Could be like this:

    .blue {
    color: #d9eef7;
    border: solid 1px #0076a3;
    background: #0095cd;
    background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
    background: -moz-linear-gradient(top, #00adee, #0078a5);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');

    -webkit-transition: background 1s linear;
    -moz-transition: background 1s linear;
    transition: background 1s linear;
    }

    That gives the background a nice animation effect when its hovered. I think that should be part of a css3 tutorial.

  • 154 hari
    August 11th, 2010 at 7:35 am

    very useful, and also very nice

  • 153 Web Design Stuart Florida http://www.sitedesignz.com
    August 10th, 2010 at 6:59 am

    Very cool and simple. Really appreciated the previews in noncc3 browsers.

  • 152 Freelance Portal http://freelanceportal.8rf.org
    August 8th, 2010 at 10:44 am

    http://www.freelanceportal.8rf.org

    Work From home: Homebased website design jobs, web developers,graphic animation, SEO, CMS templates, blogger themes, article writers, Joomla, wordpress, API programmers, ASP, XML, PHP programming projects. XXX video blogging, ebay sellers and online IT support.

    Cheatsheets and online tutorial.

    http://www.freelanceportal.vze.com

Pages: 17 16 15 14 13 12 11 10 9 8 7 … 1 » Show All

Post Your Comments

(required)

(required)

Comment Guidelines

  • Please keep comments related to topic. And be nice, don't spam!
  • Basic HTML tags are allowed:
    <a href> <abbr> <acronym> <blockquote> <code> <em> <strike> <strong>
  • Note: un-related or spam comments will be deleted.

Live Comment Preview

Back to top