Super Awesome Buttons with CSS3 and RGBA

Mark wrote this on April 28, 2009 in . It has 335 reactions

We've updated the super awesome buttons demo to include the button element and Mozilla box shadows. Check it out!

We love CSS at ZURB. We love it so much that we're using the new, yet-to-be released version (CSS3) in some of our projects. In the works for nearly 10 years now, CSS3 is finally starting to see the light at the end of the tunnel as new browsers like Firefox and Safari continue to push its implementation.

One of our favorite things about CSS3 is the addition of RGBA, a color mode that adds alpha-blending to your favorite CSS properties. We've kicked the tires on it a bit with our own projects and have found that it helps streamline our CSS and makes scaling things like buttons very easy. To show you how, we've cooked up an example with some super awesome, scalable buttons.

The Button

Here's what we're looking at:

Our original button we'll use to show how RGBA colors rock your world. See how the hex drop shadow works on white, but not dark? We'll fix that.

It's a simple button made possible by a transparent PNG overlay (for the gradient), border, border-radius, box-shadow, and text-shadow. Here's the CSS that we've got so far to make this super awesome button:

  1. .awesome{
  2. background: #222 url(/images/alert-overlay.png) repeat-x;
  3. display: inline-block;
  4. padding: 5px 10px 6px;
  5. color: #fff;
  6. text-decoration: none;
  7. font-weight: bold;
  8. line-height: 1;
  9. -moz-border-radius: 5px;
  10. -webkit-border-radius: 5px;
  11. -moz-box-shadow: 0 1px 3px #999;
  12. -webkit-box-shadow: 0 1px 3px #999;
  13. text-shadow: 0 -1px 1px #222;
  14. border-bottom: 1px solid #222;
  15. position: relative;
  16. cursor: pointer;
  17. }

Not too shabby considering it's nearly all done with CSS. We could use CSS3 to do the gradient as well, but currently only Safari supports that. For a little backward compatibility, we'll keep it as a transparent PNG. Besides, the transparent PNG is easier to work with than setting the gradient in CSS since Safari only does CSS gradients at this point.

Making it Scale with RGBA

Sweet, so we've got our button styled up and looking great, but since we're using "static" colors (Hex value), this button doesn't scale very well. What if we need it to be shown on dark and white backgrounds? What about other colors? Here's where RGBA comes in.

Small Details. Notice the shadow on the button on the dark background? We fixed the buttons' shadow blending by using the RGBA colors.

With a little RGBA love, we'll scale this single button to add five more colors, two more sizes, and make it work on any background color. Check this out—all we have to do is modify three lines of CSS.

  1. .awesome {
  2. ...
  3. -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  4. -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
  5. text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
  6. border-bottom: 1px solid rgba(0,0,0,0.25);
  7. ...
  8. }

There, now we have our super awesome button with some alpha blending added in. Still looks the same right? That's because we have a 25% black border, 50% box-shadow, and 25% text-shadow in place of regular hex values. This gives us what we need to make our original button scale to various backgrounds, colors, and sizes. With the RGBA values, we have layers of color instead of separate colors, much like what you get when doing transparent drop shadows in Photoshop.

Adding the Colors and Sizes

Now that we've got our default button to where we need it, let's add some colors and sizes. Here's the CSS to do it:

  1. /* Sizes ---------- */
  2. .small.awesome {
  3. font-size: 11px;
  4. }
  5. .medium.awesome {
  6. font-size: 13px;
  7. }
  8. .large.awesome {
  9. font-size: 14px;
  10. padding: 8px 14px 9px;
  11. }
  12.  
  13. /* Colors ---------- */
  14. .blue.awesome {
  15. background-color: #2daebf;
  16. }
  17. .red.awesome {
  18. background-color: #e33100;
  19. }
  20. .magenta.awesome {
  21. background-color: #a9014b;
  22. }
  23. .orange.awesome {
  24. background-color: #ff5c00;
  25. }
  26. .yellow.awesome {
  27. background-color: #ffb515;
  28. }

Done Deal

And now we have six buttons, each with three different sizes. You can see the final coded example here to take a closer look at the code.

And there we have it: scalable buttons with minimal CSS that work everywhere.

Although this example may be overkill—who really needs this many button colors?—the point is that RGBA is actually much more powerful than typical Hex values. Consider this: if we were using hex values, we'd have three times the CSS per color—one color for background, one for border, and one for text-shadow.

With a little CSS3 magic, we've created a scalable set of buttons with nearly half the CSS it would have taken with hex colors. Give it a go in your next project and see how it can help add that extra polish you want without huge impact on your code.


Rss

It has 315 comments.

Jon Victorino (ZURB) says

Awesome indeed!


Mark (ZURB) says

Thanks, Jon—glad you like it.

We were asked about this on Twitter, so we might as well post it here, too: these styles can be applied to a button element very easily. Just modify the CSS selector to this:

  1. a.awesome, button.awesome {
  2. /* CSS here */
  3. }

And bam! Buttons and links styled. Be aware, however, that FF3 treats buttons and links differently—it mysteriously adds more padding around buttons.


Azad (ZURB) says

Wow. These are amazing. Looks quite decent in IE too!


Mark (ZURB) says

Thanks, Azad! On your note about IE, we plan on following up on how take this and backwards engineer it to work for as many browsers as you'll need.

Right now, these buttons work dandy in IE7, FF3, and Safari, but FF2 and IE6 would definitely have some bigger problems.


Scott (ZURB) says

for IE6, the issue is with the PNG. If you use a child selector to set the PNG IE6 will not interpret the selector style and the color will show on the button. In order to do that the button, or link would need to be a child of something.

div > .awesome
{ background PNG here }


Mark (ZURB) says

Indeed, IE6 will render the infamous blue background for any PNG, and since we're tiling a PNG, it will appear over the entire button, making readability difficult and colors hidden.

An alternative option, although I like yours quite a bit, is to just target IE6 with it's own CSS in one of two ways: browser detection or the proprietary filters.

Browser Detection

Use some kind of server-side script to determine a browser and it's version, then add classes to the body tag. It'd look like this for IE6:

  1. <body class="ie ie6">
  2. /* HTML here */
  3. </body>
IE Filters

Using what Microsoft's given us to specifically target versions of IE:

  1. <head>
  2. <--[if IE 6]>
  3. <style type="text/css>
  4. /* IE6 Specific CSS Here */
  5. </style>
  6. <![endif]-->
  7. </head>

Pretty easy to do any way you choose, but some would argue it's not worth it. Either way, hopefully we can begin to phase our IE6 more and more and not have to worry about details like this :).


Dan Lewis (ZURB) says

Brilliant, as always. Thanks!


Gedy (ZURB) says

This is great! Thanks so much for sharing it.


FP (ZURB) says

@Mark

Re: More button padding in FF3

If you look in your firefox-install-dir/res/forms.css file you'll see Firefox sets -moz-box-sizing: border-box on buttons. That might be the issue you're seeing (or it might not) but you could try overriding it:

http://www.w3.org/TR/css3-ui/#box-sizing


Mark (ZURB) says

Thanks, @FP. Just gave it a whirl, but it doesn't appear to fix the problem. We'll look into more shortly to see if we can find something. Hopefully it gets fixed in FF 3.5!


Matt Wiebe (ZURB) says

Nice article. Looking forward to all of this CSS3 stuff coming into use!

You might want to consider updating the box-shadows to use -moz-box-shadow as well, as the soon-to-be-released Firefox 3.5 will have that.


Josh L (ZURB) says

This is a great RGBA crash-course. Thanks for the article!


Abdel (ZURB) says

Great! Thanks for this article. I am going to use this buttons from now on!
Really superb!


Chris Sharp (ZURB) says

I was working on a project a couple of months ago and I decided to use text-shadow and box-shadow a lot. The problem was that, as in this example, the background colors were often different and I was creating a lot of lines of CSS to sort it out.

Then I realized that I could safely use RGBa for the shadow color because the browsers that support text or box shadow also support RGBa.

After I'd worked this out I felt kinda stupid cos I assumed that everyone else was already doing this, my logic being that when I create a drop shadow in Photoshop I set the color (generally black) and then the transparency. But it looks like I may have been ahead of the pack on this one.


Jon Thomas (ZURB) says

Cool stuff. What's the selector technique you're using such as: .small.awesome ?? I haven't seen this.


Mark (ZURB) says

@Jon Thomas: With CSS, you have the ability to "stack" or "chain" classes. .awesome applies the basic button formatting, while .small changes the relative size. By chaining the classes, we create very specific selectors for different elements.

.small.awesome works like so: find all elements with both small and awesome as classes. If we simply used .small and .awesome separately, we'd end up with CSS that could be applied to anything. Here's a look at the HTML:

  1. <a class="awesome">Awesome Button</a>
  2. <a class="small awesome">Small Awesome Button</a>

The .small.awesome skips the first button, but applies to the second. That help?


Brooke Schreier Ganz (ZURB) says

These are indeed super awesome buttons. Thanks!


Sklep Zoologiczny (ZURB) says

Awesome, just awesome 0_o When all browsers will support CSS3 photoshop will be unnecessary


Sklep Zoologiczny (ZURB) says

Awesome, just awesome 0_o When all browsers will support CSS3 photoshop will be unnecessary


Jaik (ZURB) says

@Mark: Try this to fix the weird Firefox button padding:

button::-moz-focus-inner { padding:0; }


Martin Gonzalez (ZURB) says

Awesome. thanks!!


Montana Flynn (ZURB) says

Thanks for the awesome post, it really opened up a new way of using CSS for me. I checked out the buttons in IE and they looked fine, is it because I use a pngfix.htc file to get rid of the IE png bug, or did you update the code as suggested in the comments?


Michele (ZURB) says

These are gorgeous! It's because of things like this that I can't wait for CSS3 to be implemented in more browsers. :)


Alex S. (ZURB) says

Very good!!

It would be perfect if doublt click won't select text on the button...


Corrianna (ZURB) says

I haven't tried putting these buttons anywhere yet, but I've noticed that on all 4 corners of all the buttons (and all the fields in this comment form, too) have little black caret-shaped lines (this is in Google Chrome). Is there a way to fix this? Other than that, these buttons are amazing! Bravo! :)


Corrianna (ZURB) says

I haven't tried putting these buttons anywhere yet, but I've noticed that on all 4 corners of all the buttons (and all the fields in this comment form, too) have little black caret-shaped lines (this is in Google Chrome). Is there a way to fix this? Other than that, these buttons are amazing! Bravo! :)


Justin (ZURB) says

Here's what I have to say about IE6 support: DON'T.

It's taken soooo long to implement these sorts of forward thinking elements because of one bloody browser, and it's as old as some developers I know..

P.S. I love what you guys have posted here. Some great accomplishments are going to be had due to this.


Mark (ZURB) says

@Justin: I know it sounds like a cop out, but what it boils down to is audience and the site you're working on. For instance, within our new app Notable, we want our marketing site to work in everything including IE6 (gotta get the message out!), but the app itself only works in IE7 (and FF and Safari).

Definitely don't let it hold you back, though. Pushing forward is great, but if you can do so by showing a little love to those you leave in the dust, well that's just an little something extra on top, no?

(And thanks for the retweet!)


Daniel Pospisil (ZURB) says

Very nice :) Thanks.


indr@ (ZURB) says

thanks for your article about CSS, but I still newbie in design including CSS :D


Rahul (ZURB) says

Nice CSS technique. Do you have a download link for this one?


Tyler (ZURB) says

To get the shadow to look correct in FF add this:

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Should work for FF 3.5


Mark (ZURB) says

Thanks, all! Glad to see everyone likes 'em!

@Rahul: You can find the demo here. Just save the page via your browser.

@Tyler: Good call, will do. The other great thing about FF3.5 is that it allows for text-shadows now!


labtech (ZURB) says

The effect is nice, but IE 8, 7 and of cource 6 doesn't support this. I think it would take a lot time until webmaster can use this technic.


Iva (ZURB) says

In Firefox 3.5.1, this looks just awesome! Thanks.

In IE8, the effects are viewable, just the rounded corners don't work. But guess what? This site itself is NOT viewable. O_O

While I normally use Firefox, I think you're not doing the right thing by making your site completely unviewable in IE. I understand that IE6 is obsolete, but making a site scroll on its own without me touching anything in IE8 is a bit odd. I had to press the compatibility button and let's see if it'll even let me leave a comment.

I know from own experience that I would't want to lose my IE visitors.


Wallace (ZURB) says

You did a great job, i like the button a lot, thanks your sharing.


Mark (ZURB) says

@Iva: Glad you like the buttons—in FF3.5, at least! :) We've tested our site in IE8 and it appears to be working just fine. What kind of problems are you seeing when you say the site is not viewable?

It sounds like there's something else going wrong if you're page is autoscrolling; we don't have anything that does that.


Fuad (ZURB) says

SImpel and nice, I just love simplicity! I wonder if IE9 is going to support CSS3 :-P.


Matthias (ZURB) says

Sweeeeet!


Turki (ZURB) says

Thanks, but can you attach a source code to us ? to become more clearly ..


Kim Steinhaug (ZURB) says

Well, IE v8.0.6001.18784 here... I loaded your page and while it started rendering nicely it starts hanging after a few secs and becoms white... Then you get autoscrolling roing to the right while the vertical scrollbar tells me that the site is extremely long... I switched to Firefox to see your site, so Iva is correct - your site does NOT work in IE8.


Kim Steinhaug (ZURB) says

Just checked it again, it is a very funny bug I might add! Never saw anything like it. After a few seconds it hangs, I also get a Javascript error on the page - to bad I do not have any debugger tools on this PC so I cannot be of much help at the moment. What happends - maby some people could sniff out the bug - is that the orange line is kept at the top. Then it seems you get a sudden 3000px padding between this line and the rest of the page vertically - you may scroll to the bottom and the page is there. Then, like there was a meaning for it - a left padding/margin for the entire page is incremented by maby 5px or so once/twice a second making the page grow in width.

Viewing the bug in action it almost seems like there is a point for it, :D I suspect there is some javascript that fails in IE8 and does some crazy stuff to the layout, especially since you get that JS error in IE8.

Apart from that, back to your buttons - lovely to see fellow developers taking advantage of the new possibilities of the web! Another thing is how we get out users to switch to browsers that has theese capabilities!


Josh L (ZURB) says

You should update this to include -moz-box-shadow for FF3.5! :)


CSS Guy (ZURB) says

You should never use <a> tags as buttons. This is VERY BAD HCI. And has a numerous problems with bots and auto readers accessing the HREF. Google strongly advises against this.

What you have designed is great, but please redesign this do annual BUTTON or INPUT Button.


Mark (ZURB) says

@CSS Guy: The point of making some links look like buttons is simple: sometimes we want a link to look like a button because it gathers more attention than just text. That's why we've built these buttons in a way that allows for both.

By leaving the CSS open ended, and by that I mean not assigned to a specific element, we allow for both buttons and anchors. We've just updated the example demo of the buttons to include Mozilla box shadows and a demonstration of super awesome buttons with the button element.

Check out the new stuff here »


Mark (ZURB) says

@Kim Steinhaug: We've fixed the IE8 bug! We were running a version slightly older than yours. It turns out that IE8 didn't like a position: relative we had on our containing div. We've removed it for IE8 for now.

We've also fixed the javascript errors your saw. One was for javascript that was no longer needed and the other was an older version of Prototype.


Hugo Moreno (ZURB) says

Excellent thanks for sharing it!!! I love the simplicity of the CSS3 code.


Dave (ZURB) says

these are AWESOME. very easy to implement. i'm definitely going to use them on my next site


Vikas KM (ZURB) says

Wonderful post.... i wanted one button... but didn't knew how to develop.. thnx for the tutorials.. i m subscribing you RSS now....

thnx for sharing


The Dude (ZURB) says

would LOVE to use this... but my large, corporate client won't get off of IE 6. I can't even bring it up to them anymore... they won't switch. I've pointed out that Microsoft wants them to stop using it and that DIGG & YouTube are about to stop supporting it but they don't care: their IT department won't switch them so it is a non-starter.

Maybe in a year or 2 I will be released from IE 6 development hell...


Jonathan (ZURB) says

Hey,

Fantastic buttons. My only issue is that in Safari, the buttons come out square, not rounded. Really not sure why, they look fine in all other browser.

Let me know if there is something you can think of.

Thanks,

Jonathan


Mark (ZURB) says

@Jonathan: What version of Safari are you running? The rounded corners only work for Safari 3.x and up.


Karl (ZURB) says

If it does not depress like a button, then, IMO, it's not a button.


Marios (ZURB) says

Guys both rounding and alignment don't work on ie :(


Mark (ZURB) says

@Karl: We've gone a different route than adding that kind of active state. Instead of giving the button an indented look on the :active class, we've opted for a 1px move downward on click. Think of it like a keyboard key or a mouse button. Those move down, but don't give the visual impression of a depression.

@Marios: No, unfortunately these buttons weren't designed with IE (v6, 7, or 8) in mind. They degrade to rectangular buttons with no text-shadow, box-shadow, or border-radius. The point of this post was to show what can be done with CSS3 and the RGBa color values to create a scalable set of buttons with multiple colors and sizes.


amine (ZURB) says

very nice and they seem like images...


gh (ZURB) says

usefull article. thanks :)


oyunlar1 (ZURB) says

really amazing buttons.. thanks so much for sharing it.


Bradford Sherrill (ZURB) says

Excellent post, very useful vs the static png images


Nick Rougeux (ZURB) says

This is such a great example of progressive enhancement and graceful degradation. It's one of those small touches that can make a world of difference on some sites. I've already implemented this on a new page of my site. This is one of those posts that will wind up getting referenced by every list for useful techniques for years to come.


Alek Davis (ZURB) says

I noticed something weird: buttons in the Using the Button Element section look fine in IE8 (well, obviously with the exception of rounded corners), but they do not get rendered correctly in IETab (some buttons overlap).


haberler (ZURB) says

i have to say really awesome work. Thanks


Michael Curry (ZURB) says

Thanks!

However, in order for new button element styles to render properly there is one thing you need to add to the in-page styles that is in Zurb's global.css stylesheet. Adding this style (below) to top of the in-page ".awesome" styles will finish the button elements with the intended brushed bevel look. Without this style they render with an inset border.

SO ZURB - PLEASE, ADD THIS BELOW TO IN-PAGE STYLES on EXAMPLE PAGE - FOR EASY COPY FOR FOLKS LIKE ME :)

/* Above all awesome button styles - you need to clear the default button style before adding awesomeness! */

button {border:0 none; margin:0; text-align:left; }


John Faulds (ZURB) says

You could probably solve your IE6 problem by using 8-bit PNGs with alpha transparency rather than 24-bit. IE6 has partial support for alpha transparency on 8-bit PNGs and in the case of a gradient like that, it would probably show nothing at all but would still allow the colour behind to show through correctly.


LOTR (ZURB) says

Nice. But they're just a button.They don't open a new page.I want to give link to them.Exp: Super Awesome Button (when i click it my homepage will open) How can i to that?


Mark (ZURB) says

Great ideas all around, everyone. Glad to hear you all like them!

@Michael: Thanks for pointing that out. We'll factor our global styles into the code with our next update.

@John: That's a good idea. For now, we turn off background images on our buttons to present just the background color.

@LOTR: This "button" styles are for both links and actual buttons. You can add the proper classes to either of those elements and achieve the action you're referring to.


Darren (ZURB) says

Can this be used to style a select (combobox) as well? Not sure about the down arrow? I'm a bit new to this CSS stuff, but am loving it.

Many thanks. Oh, GWT 2.0 rocks with css.


Tuscaloosa Web Design (ZURB) says

Very slick. I love being able to create basic visual effects with CSS without having to use Photoshop.


Cespur (ZURB) says

This article is awesome, but untill Internet fucking Explorer will allow it I can't use it. A shame, really, 'cause this sort of effects are awesome indeed.

Damn you, Microsoft and your damned Internet Explorer.


Navrang Panchal (ZURB) says

Here its website which support IE6 and other browser. but simple box might be help its out to you. this link :http://www.bestinclass.com/blog/2008/css3-border-radius-rounded-corners-ie/

have checkout.

cheers

I really happy to see your blog news things looking to hear from you. new things.


Mark (ZURB) says

Cool article - thanks. BTW, what CSS editor are you using?


Ow (ZURB) says

Very very, very nice !!!! Tanks man ! ;D


Tobias (ZURB) says

Thanks a lot I was looking for exacltiy this :-).

Under which licence do you publish this css-html-code? Is it public domain? Or some kind of CC-Licence?

Thanks


Mark (ZURB) says

@Mark: We use Coda and Textmate at the office.

@Tobias: Glad you like it! We haven't published it under any particular license, but that may be something we look into in the future. Feel free to use this code in any of your projects though :).


James (ZURB) says

Hi,

I was wondering if we are free to use the css and png you created for this amazing piece of work?

Zurb would of course be credited in CSS comments associated with the classes.


makuchaku (ZURB) says

As Michael mentioned, one needs to add button {border:0 none; margin:0; text-align:left; } in the CSS file to make the buttons complete.

Thanks a ton for the awesomeness!!

Maku http://makuchaku.in


Florian (ZURB) says

If you still support IE6 you can use a behavour for transparent pngs:

img {behavior: url("iepngfix.htc");}

download and demo @ http://www.twinhelix.com/css/iepngfix/


Gregor (ZURB) says

Hey guys, this is indeed awesome work. I started using your super awesome buttons in some of our projects and everbody loves them!

While working with them, I made some tweaks, e.g. to avoid the necessity of configuring two different colors for the different state and to add a super awesome onclick Design these buttons just deserve!

I posted a short post about it, check them in our blog: http://www.elctech.com/core/make-your-buttons-look-super-awesome I hope you like it!

Once more, thanks so much!


Andreas Stephan (ZURB) says

Truly awesome! Thanks


chopeh (ZURB) says

Damn. They are some awesome buttons.

Think I'll be using them in some future projects, since they degrade pretty nicely.


Miles (ZURB) says

These are a great example of what's possible with CSS3, the buttons look great. My only issue is that you've decided to remove the link's and input's outline property, rendering any website using these kind of links useless to users who navigate by tabbing through an interface because of disabilities.

If you don't like the default focus style you can change it with css or create a new :focus style where applicable without impeding users who must use a keyboard to navigate. The default styling of your website removes these outlines as well, without specifying a separate :focus style. You've obviously made a conscious decision to do this, either because you don't believe that disabled users visit your website or that you prioritise the aesthetics. I would ask that you leave some kind of focus style in place when you create examples like this one however, just because users who may not be aware of the issues involved will copy your CSS and create their own sites where there is no focus style on these links and inputs when otherwise there may have been.


Ryan (ZURB) says

how do i get the .png you are using, when i save the page i get all images and files but i dont get the .png?

Help, sorry if this is silly Q!


sebastien Barrau (ZURB) says

How would you recommend i add an image in front of the text for just one button ? I'm using the buttons on this site www.sebastienb.com/clients/sas/ and i would like to have all my donate buttons have a hand in front of the text like you see on www.sowaseedonline.org

thanks for the help.


Kees (ZURB) says

These buttons are very, very awesome!!!!! Thanks :). This really rocks! I've never seen such good-looking buttons.


Timpaay (ZURB) says

Thank you!!! :)


honour chick (ZURB) says

great techniques , thanks for the tutorials. ;)


Alexey (ZURB) says

В своих компонентах начал использовать такой стиль кнопок


David (ZURB) says

Thanks for a great piece of web design!

One question though... is there a way to get this to validate to CSS3? Validation doesn't like the corner radius properties...


Jonathan (ZURB) says

@David Unfortunately it won't validate according to the W3C until the spec is finalized - the validator doesn't recognize most engine-specific properties (i.e. -webkit-border-radius). Once the spec is final it'll be changed to just border-radius and the W3C will start to validate it.

Right now not even the major engines agree on the implementation, as you can see in the corner-specific declarations like: -webkit-border-top-left-radius vs. -moz-border-radius-topleft.


Paul Dixon (ZURB) says

Instead of using an image file for the gradient you can use a data uri. This has 2 benefits:

  1. You dont have to worry about the location of the image file on your server because its in the CSS
  2. Because IE6 doesn't understand data uri's it doesnt display any overlay on the button, hence displaying the right colour without any CSS hacks! :)

I converted your overlay image to a data uri :

background: #222 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAYAAACd+7GKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAClJREFUeNpi/v//vwMTAwPDfzjBgMpFI/7hFSOT9Y8qRuF3JLoHAQIMAHYtMmRA+CugAAAAAElFTkSuQmCC") repeat-x;


Amund (ZURB) says

No more text selection on buttons :

-moz-user-select: none;
-webkit-user-select:none;
-khtml-user-select: none;
user-select: none;


Sandro (ZURB) says

Hello I'm trying to give this style to inputs but what is shown is different, do you why? The left and top borders are white


Sandro (ZURB) says

nevermind I meant button, my mistake it's working now anyway


Chrome (ZURB) says

i dont know how to apply this code, is there any video tutorials???


Hades32 (ZURB) says

Please add the non "-moz-" "-webkit-" properties, too.


Egypt Travel Portal (ZURB) says

Awesome ! i was looking for this lesson and found it in Digg ... thank you so much


Egypt Travel Portal (ZURB) says

Awesome ! i was looking for this lesson and found it in Digg ... thank you so much


Erik (ZURB) says

The IE6 conditional comment in the CSS would be a nice trick if IE6 dealt with chaining classes the right way.

I was trying to do multilple sizes using a base class, then chaining classes to make the link a big button or little button.

.awesome {
// would be the base CSS code
}

.lrgButton  {
// would be the CSS to make it the larger button
}

.smlButton {
// would be the CSS for the smaller button
}

<a href="yourdomain.com" class="lrgButton awesome">Your Link</a>

Should look different than:

<a href="yourdomain.com" class="smlButton awesome">Your Small Link</a>

Since IE 6 doesn't understand the chain correctly and appears to only interpret the last class in the chain, the chain doesn't work and the conditional comment is wasted.

If you want to use a conditional stylesheet to target IE6, your going to need to ditch class chaining and write specific classes for each different size and or color.

Just thought I'd share and save others some time in the fight.


Zibri (ZURB) says

I strongly suggest to add:

onselectstart="return false" on your 'awesome buttons' :)


Virtual Consulting (ZURB) says

I suggest you add this line:
input.awesome, button.awesome { border: 0px; }
This line drops the borders in button and submit input tags.
Very good article.
Regards


brothercake (ZURB) says

@Amund and @Zibri - both of your suggestions are major accessibility issues, and hence, extremely bad advice. Developers should not do either of the things you're suggesting (ie. don't remove the user focus, and don't prevent text selection).

In fact as far as user-focus outlines go, you should add something to make them more obvious, not less. Something like this for example:

.awesome:focus
{
    outline:2px solid rgba(0,100,200,0.5);
    -moz-outline-radius:3px;
}

@Jaik - that's a nice idea to fix the button padding issue, but it only partially works - it removes some, but not all, of the excess padding; what's left corresponds exactly to the space taken up by the user-focus caret, which is odd - the outline caret shouldn't take up screen space, it should be overlaid...


brothercake (ZURB) says

@Erik - IE6 does support multiple classes, but it treats chained rules as OR instead of AND -- ie. a rule for .awesome.large will apply to an element that has either of those class names, instead of (as it should be), both of them.


Max (ZURB) says

thanks! Very useful article, it works


Lee Smith (ZURB) says

Love the buttons! I added them to a project of mine and I think they turned out great.

http://www.opensourcerails.com/projects/339403-TicketMule


hasfa (ZURB) says

awesome..great and nice button. Thanks for all this. for next project i surely use it.


Metric Stormtrooper (ZURB) says

and again, IE fcuks up on css3 properties and leaves a plain colored box :|


Sean (ZURB) says

Metric is correct, it just shows a giant plain-colored box for IE.


Java developer (ZURB) says

Very informative. Thnx


web design (ZURB) says

Hi, this is great and zurb help me alot, thanks for code .


Yaaaaaa (ZURB) says

button {border:0 none; margin:0; text-align:left; }

You need this in the STYLE tags of your demo. Otherwise the buttons look awful in FF because of the FF button borders on BUTTON elements.


Mehedi (ZURB) says

Awesome .....


Oyun Oyna (ZURB) says

Thanks, but can you attach a source code to us ? to become more clearly ..


Oyun Oyna (ZURB) says

Thanks, but can you attach a source code to us ? to become more clearly ..


pewe (ZURB) says

very handsome and simple elegant... :)


Andrea (ZURB) says

Internet Explorer 7- show button (and input) elements larger than they should be. Add a bit of magic:
input.awesome, button.awesome {overflow:visible;}
this does the trick, don't ask me why, it's IE :-)


Jordan Walker (ZURB) says

excellent resource to style and implement buttons.


Bart Bons (ZURB) says

When you use Safari (Snow Leopard) you should also copy the following css style from the global.css:

body { -webkit-text-stroke: 1px transparent; } /* Snow Leopard Safari Type Fix */
@media only screen and (max-device-width:480px) { body { -webkit-text-stroke:0 black; } } /* Undo the fix for Mobile Safari */

This makes the button font look more crispy. Or you can add the style to the buttons only:

.awesome { -webkit-text-stroke: 1px transparent; } /* Snow Leopard Safari Type Fix */
@media only screen and (max-device-width:480px) { .awesome { -webkit-text-stroke:0 black; } } /* Undo the fix for Mobile Safari */


Savunma Oyunları (ZURB) says

This is great! Thanks so much for sharing it.


Fredrik Karlström (ZURB) says

Wonderful work, I love it! Together with the base64-fix Paul posted above it's very lightweight and flexible. Thank you for sharing!


Volomike (ZURB) says

I found problems in IE6 with this until I reversed something like:

.button.red

with:

.red.button


Jonathan (ZURB) says

@Volomike IE6 has trouble with sequential selectors - funny as it seems many times the fix is exactly that, just modifying the order of classes. Gotta love IE6.


Volomike (ZURB) says

Also, as of Opera 10.50, "border-radius" is now supported and should be used, anyway, to make way for the "border-radius" CSS3 property. I didn't see that in your code as of March 11, 2010, so please consider that. It should be appended after the other *-border-radius items.


Mike (ZURB) says

thanks, great tuts. Recently I have read the book of Krug about Usability and I realized that nothing can change the function of a button in a website. This tuts just adds more convenience and makes life of designers easier.


oyunlar1 (ZURB) says

Wonderful post.... i wanted one button... but didn't knew how to develop.. thnx for the tutorials.. i m subscribing you RSS now....


Accappella Creative (ZURB) says

Brilliant, Great demonstration on how to create good looking buttons without the use of images. Will save lots of time not having to create image graphics and can use live text links in a stylish way. Thumbs Up. :)


Marcelo (ZURB) says

Excelent work, very clean! I love the way you´ve used rgba colors to do the magic, after 4 years of pure CSS work, I´m glad to find new great things along the way. Thanks for sharing!!


Savunma Oyunları (ZURB) says

very handsome and simple elegant... :)..


araba oyunları (ZURB) says

Excelent work, very clean! Nice. But they're just a button.They don't open a new page


timani (ZURB) says

Briiliant article on the buttons! I agree CSS3 is pretty awesome and hopefully there will be better browser compatibility soon, it really will allow for more control over the UI as well speed up development time.

No more cutting and fiddling around with images and photoshop/gimp for button backgrounds to get a decent layout.


savaş oyunları (ZURB) says

I didn't see as of March 11, 2010, so please consider that. It should be appended after the other *-border-radius items.


kelly Johnson (ZURB) says

to get rounded edges in IE, google border-radius.htc. Stick that in the same directory ass the css.

In your styling, just add: behavior: url(border-radius.htc);

so, you would have this on a div: position:absolute; top:112px; left:25px; width:750px; height:550px; background-color:#FFF; border: 1px solid #fbce01; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; behavior: url(border-radius.htc);


Anthony (ZURB) says

Really great job, congratulations!

I had a little “IE7/8 problem” when adding this CSS on some pages: The buttons were placed in a container with property overflow:auto; (to fill about half of the height of a screen). OK. Those which were "outside" of the container (need to scroll to see them) "flew" above the rest of the page on IE7/8. I saw them going up or down, outside of my container...

To solve the problem I added a property position:relative; to the "overflowed" container.

Hope that could help someone...


Derrick (ZURB) says

Excellent! I just wish browsers would get up to speed!


super awesome (ZURB) says

They are super awesome, my only concern would be how much cross browser compatibility do they offer.


Jacque (ZURB) says

Great buttons! I am trying to include these in my Static FBML tab. Where exactly does the code go?


J.F. Herrera (ZURB) says

Excellent work. Impressive to see that very little PS was required.


Juegos (ZURB) says

Simple and professional. Thank you guys. Sublime!


barbie oyunları (ZURB) says

This line drops the borders in button and submit input tags.Thanks


Alan Feekery (ZURB) says

Great resource. Thanks very much!


oyunlar1 (ZURB) says

i loved it very much!.. with the base64 fix. it is really lightweight..


Evert (ZURB) says

I agree with VoloMike, it would be fairly easy to add Opera support to these indeed very awesome buttons. I added border-radius: 5px; to the code for my own project, but maybe this code can be updated too, so everyone can enjoy these buttons in all browsers?


Buy Used (ZURB) says

Really good stuff....! Very useful. Thanks.


Birmingham Web Design (ZURB) says

Really useful post - just tried this out in my Facebook Fan Page and looks ace!


Sivaranjan (ZURB) says

This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site. Hope you dont mind. :)


denim (ZURB) says

Really useful article. Thanks for sharing


konto (ZURB) says

this i was searching for! thx guys. buttons like this are not only looking awesome. they also reduce the time server need to load the website. great!!


Greg (ZURB) says

Love these buttons! Using them in a soon-to-be-public project, though I will likely throw in some fallback.

A question, though: I haven't been able to suss out exactly what the overlay PNG is doing. I thought it would have a gradient of some sort, but it doesn't seem to. The net effect of the overlay seems to just be lightening the various elements of the button. Is that correct?

Makes it a bit tricky to match up corporate colors, but I'll find a way, as long as I understand what the overlay is doing. ;-)

Greg


Oyunlar1 (ZURB) says

Wonderful Stuff you post!! I LOVE it!


James (ZURB) says

I know it's not too major, but be prepared for those round corners to default to square in Internet Explorer browsers...

Last I checked, even Twitters round corners are square in Explorer...

Not a major deal, but if you tell your client they are round corners and they go to look at them in Explorer...


Jeffrey (ZURB) says

this doesn't work in ie7.

also, this page is TOTALLY messed up in ie7.

:(


maf (ZURB) says

<div class="section">
   <h3></h3>
   <form class="form">
        <span class="textarea">
             <textarea name="text" cols="" rows="4"></textarea>
        </span>
        <span class="textbox">
              <input type="text" name="email" id="email" />
         </span>                                
    </form>
</div>


candy (ZURB) says

Thanks for sharing, I love it very much!.


Stuart P. Bentley (ZURB) says

Don't forget to specify the non-browser-specific versions of those CSS elements for the final standardized version. That's the one thing that's keeping you from working in IE9 right now.


Aaron Vail (ZURB) says

this is awesome! outstanding post! thanks so much for sharing! CSS3 is awesome!


Eddie (ZURB) says

Don't -moz me bro! Web standards FTW!


ckdo (ZURB) says

For buttons, property

border: none;

is needed

Thank you ;)


Ian (ZURB) says

Stupid question. New guy here. How so you get the buttons to move like they are physically being pushed down. I tried using your example code and setting an active declaration but then it moves my borders and such down as well. Here's what I used:

.awesome{ background: -moz-linear-gradient(top, #000, #fff); background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#fff)); display: inline-block; padding: 5px 10px 6px; color: #294069; text-decoration: none; font-weight: bold; line-height: 1; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 3px #999; -webkit-box-shadow: 0 1px 3px #999; text-shadow: 0 -1px 1px #222; border-bottom: 1px solid #222; position: relative; cursor: pointer; }

.awesome { ... -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); ... }

.awesome:active { margin: 2px 0px 0px; }

Any help would be greatly appreciated. Just found this site via Web Designer Wall and I love it already.


Jonathan (ZURB) says

@Ian The buttons in our example move not based on the top margin, but on a relative position of top: 1px - basically telling it to move the button 1px down from its top border. You can do the same thing with -webkit-transform: translateY(1px);

We've learned over time though that many browsers have trouble detecting the correct click event for a moving object, so you can miss clicks on the buttons. You might try using a depressed state instead, where the :active class would use a reversed PNG overlay. Hope that helps!


Ian (ZURB) says

@Jonathan Awesome. Thanks a lot. Now all I have to do is figure out how to make these buttons do something besides open a link, but I'm pretty sure that has more to do with JavaScript and PHP than CSS. I'll definitely be adding this to my RSS feed.


Ian (ZURB) says

BTW, just tried to subscribe to your blog and it's returning a 404 @ the FeedBurner site and it's not doing anything when I click the button.


Jonathan (ZURB) says

@Ian Looked like Feedburner was down - sorry about that. Should work now.


CyberSkull (ZURB) says

Could you update this to include gradient (as supported by Gecko & WebKit) as well as the updates to border-radius (currently only -moz- requires prefix)?


SEO Pakistan (ZURB) says

Really nice blog


SEO Company Pakistan (ZURB) says

Thanks for sharing useful information.


[email protected] (ZURB) says

How would you use this for solely a text link to come down like these buttons? I have:

a.links { text-decoration: none; position: absolute; line-height: 1em; color: #002D56; font-weight: bold; -webkit-transform: translateY(1px); }

a.links:active { margin: 2px 0px 0px; }

But seems to not work properly.


cocker tipps zu Girokonten (ZURB) says

Thanks for your article. These are beautifull buttons. Very impressiv and simple.


Abdullah Dernek (ZURB) says

good info thanks for sharing


mario oyunları (ZURB) says

thanks for sharing man


giydirme oyunları (ZURB) says

nice blog . thanks


mario oyunu (ZURB) says

Very useful. Thanks.


3d oyunlar (ZURB) says

thank you admin.. VERY POST!


Bedava (ZURB) says

Thanks teşekkürlernice blog . thanks


Nicolas (ZURB) says

Hi, very nice work. I'm trying to use this awesome style for a < button > (to submit the form) and a link < a > (to cancel the same form), side by side. In FF3.6.8 the dimensions are not the same : button is much bigger... Did somebody manage to fix this problem ? Thank you


hotfile indir (ZURB) says

this is awesome! outstanding post! thanks so much for sharing! CSS3 is awesome!


Rapidshare indir (ZURB) says

very handsome and simple elegant... :)


hayata dair (ZURB) says

Thanks a lot for this cute icons..


acatl (ZURB) says

@mark, about the extra padding on firefox check out http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/


Facebook Video Indir (ZURB) says

Don't forget to specify the non-browser-specific versions of those CSS elements for the final standardized version. That's the one thing that's keeping you from working in IE9 right now.


DonOfTheWorld (ZURB) says

Hi,,,thanks for sharing,,,,,,,but where I've to put these codes, before the navigation item or after it & how?

Stupid question.......


oyun1 (ZURB) says

thank you for good sharing


Avatar Oyunları (ZURB) says

thank you.


mario oyunları (ZURB) says

Really nice blog..


e-bilisimruzgari.com (ZURB) says

thank you for good sharing


Matt Briggs (ZURB) says

love these buttons :) I'm packaging them up as sass with some helpers for rails as a plugin, would you guys be ok with me putting that sort of thing up on github?


Nick Krambo (ZURB) says

Great post! I'll be using this technique from now on. A couple of backward compatibility tweaks here and there and you have awesome results across the board. Thanks for sharing :)


Thiago (ZURB) says

Great article! I'm from Brazil, I've been following your works for a while and I'm always learning new things from you, congratulations.


Oyun1 (ZURB) says

Thanks for the hinks.


Oyun1 (ZURB) says

Thanks for the hinks.


Avatar Oyunları (ZURB) says

Thanks for the hints.


Bob esponja (ZURB) says

Very nice tutorial and fantastic button, I will try do a menu with them, thank you very much for share!


Josh (ZURB) says

Very Cool Buttons! Css 3.0 is wonderfull, thank you Mark for share!


Torkil Johnsen (ZURB) says

Important to remember to also apply the CSS reset to the buttons, at least if you're using button elements like I was:

button { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; text-align: left; }


Florian Schommertz (ZURB) says

Nice work - the 3D effect with the gradients - that's how it's done. Thanks for sharing!


hotfile (ZURB) says

thanks admin. great post.


Ian (ZURB) says

Internet Explorer makes the internet that much worse, and they probably wonder why nobody uses Bing, see you in hell, Microsoft.


FlashNWeb (ZURB) says

Simple yet beautiful effect! very helpful ;)


Cocina Juegos (ZURB) says

Great Buttons, and appear easy to use, thank you for sharing! I will use them for my personal website ;-)


otoemlak (ZURB) says

Nice work - the 3D effect with the gradients - that's how it's done. Thanks for sharing


Vincent Lauv (ZURB) says

This is simple way, but great, thanks


Chimera Web Design (ZURB) says

Very cool indeed, nice work!


Tagesgeld (ZURB) says

Wow - what nice buttons - can we use it in our blog system(s). They look very nice. Thx.


Web design hippo (ZURB) says

The buttons don't really lose too much in IE. I mean the border corners disappear, but they still look really awesome!


mario oyunları (ZURB) says

good article and post thanks.


clickddl (ZURB) says

thank you admin. great post.


Proc (ZURB) says

Thanks Başarılar Dilerim...


maloy75 (ZURB) says

great tutorial. Thanks


top patlatma oyunu (ZURB) says

good article post.


Bedava (ZURB) says

Başarılar Thanks Teşekkürler


giysi giydirme oyunları (ZURB) says

nice good article and post thanks.


Varun (ZURB) says

Awesome stuff, and so easily explained, anybody can make it... Thanks!


Angelo (ZURB) says

wew...I really don't know how to do it, hehe... maybe I just don't know how to use this one..If you don't mind, could you give the code which is already design, because everytime i do it, it always shows nothing, just the words.. :'(


Brad (ZURB) says

So much awesomness in one post, will have to try these out on a test site to get the swing of it. Thanks for the great info.


Jim (ZURB) says

Works great in safri and no luck in IE8. I tried everything including removing everything and moving the class around in the tags. Any suggestions: Appreciate the help!

Here is the code:

<style type="text/css">


    .large.awesome, .large.awesome:visited          { font-size: 12px; padding: 8px 14px 9px; }


    .blue.awesome, .blue.awesome:visited        { color: #3B5998; background-color: #D8DFEA; font-family: Verdana, Arial, Helvetica, sans-serif; }
    .blue.awesome:hover                         { color: white; background-color: #627AAD; font-family: Verdana, Arial, Helvetica, sans-serif  ; }

</style>
<a><span class="medium blue awesome">Awesome Blue Button</span></a>


Jim (ZURB) says

On previous post, I forgot to mention I am doing it in facebook with fbml static box. Works great for safari so it makes no sense. Thx Jim


Jim (ZURB) says

Fixed: Can you please remove my last two posts. Have to use an external css sheet with fbml and ie.


yarış oyunları (ZURB) says

good thanks admin.


Ramesh Vishwakarma (ZURB) says

Got something new thanks.. :)


SiteOptimo (ZURB) says

Thanks for the great tutorial. Now how cool would it be to make it in CSS3 without the use of an image?


steve hunt (ZURB) says

Thank you. I was really undecided if iwas going to watch this or not. But after reading your review now i am sure i am not going to see it. Time is limited. Again, thank you.


Juegos (ZURB) says

Thanks for the great tutorial, I needed it. Thanks Greetings


Nicole Sullivan (ZURB) says

I used a CSS3 gradient with RGBa instead of the background image. It seems to work nicely. Image-free buttons make me happy.

background-image: -webkit-gradient(linear,left bottom,left top, color-stop(0.34, rgba(255,255,255,0.0)),color-stop(0.78, rgba(255,255,255,0.7))); 
background-image: -moz-linear-gradient(center bottom,rgba(255,255,255,0.0) 34%,rgba(255,255,255,0.7) 78%);

(my design is a little different, so you'll need to adjust the gradient)

Also, it will be easier to get it working in IE if you don't use the double class names. IE6 will match only the second class name "awesome" so all buttons are going to be large. Anyway, you don't need to specify both because you know everything with the class large is also an awesome button. It's redundant.


ateÅŸ ve su (ZURB) says

So much awesomness in one post, will have to try these out on a test site to get the swing of it. Thanks


lomo (ZURB) says

dude it works like a charm


Wolverene (ZURB) says

This is absolutely awesome. But it doesn't show text when i use it as an input button on chrome as in.. . if i make it a type="submit" it shows a beveled button which ruins the look. Any work around? thanks!


Jayhunter (ZURB) says

Love your buttons. Found a mistake in the example though:

.small.awesome, .small.awesome:visited             { font-size: 11px; padding: ; }

is obviously missing the padding values. I figured it could be something like this:

.small.awesome, .small.awesome:visited             { font-size: 11px; padding: 3px 8px 4px; }

otherwise awesome work!


Pr. Aldenir Araújo (ZURB) says

This is great! Thanks so much for sharing it.

From: Brazil


sulena sexy (ZURB) says

So Great, I will try it right know


sc (ZURB) says

good thanks admin.


tuz (ZURB) says

Very Cool Buttons! Css 3.0 is wonderfull, thank you Mark for share...


sikis (ZURB) says

You did a great job, i like the button a lot, thanks your sharing...


nishu (ZURB) says

Wow this is really cool .... thanx for sharing it


designer store (ZURB) says

I am so proud that so great creators give their creations in our world. In case I were the monarch of the kingdom, I would give the writer of this essay with medal


Custom logo designs (ZURB) says

I am just saying from my heart that your blog is awesome and great because it will be much useful for the users to design the blog in various information provided by you. I am also running a blog really this kind of information help me to design my blog impressively and fabulously thank a lot. Classic blog.


Chris (ZURB) says

These are really are awesome. For some reason, I had a problem with the border-bottom: property not working right in firefox. I changed it to just border: and it displayed fine after that.


Chris (ZURB) says

@wolverine, I got the "beveled" problem to go away on awesome type=submit input buttons by changing the border-bottom to just border.


Choikit (ZURB) says

I'm just looking for this style! Thank you for sharing!!


SEO (ZURB) says

i really aprciated that you u give very hevy information to us about the Super Awesome Buttons with CSS3 such a great information thank you


Olli (ZURB) says

Heavy stuff! I never got it, as I had always problems with the round corners. And that's the most importing thing for buttons. THANKS! I love it!


gordonsills (ZURB) says

Still css is not used properly :( You should use border-radius and box-shadow (without vendor prefix) to make it compatible with all browsers (Opera, IE9).


Andrey (ZURB) says

Hi guys,

great work but i can't fix probem while using your code with input type = button. My browser (FF 3.6.12) shows some strange white borders above my button. How to fix such issue? Somebody asked such question earlier but there is no answer


Subhash (ZURB) says

Absolutely beautiful. Thanks for sharing. I've literally littered my website with these awesome buttons!


Scentsy (ZURB) says

My site is a work in progress, but I must agree that having professional looking buttons instead of text links looks much more professional and is sure to grab the attention of readers. Going to start implimenting these into my site. Thank you!


Scentsy (ZURB) says

I am also going to take the suggestion of shadowing, which I think is a great look.


oyun1 (ZURB) says

Absolutely beautiful. Thanks for sharing. I've literally littered my website with these awesome buttons!


wow resorts (ZURB) says

thank you.i like site and posts


izmir nakliyat (ZURB) says

thanks very good bilgi


frankie (ZURB) says

I tried doing this, but the buttons don't have rounded corners and they are just a solid black color, what am i doing wrong?


Dozza (ZURB) says

You can make them work and appear more like a physical button by removing or decreasing the box shadow on the active pseudo-class

Example:

   .button:active {
-webkit-transform:translateY(1px);
-moz-transform:translateY(1px);

-moz-box-shadow: 0 0px 1px rgba(0,0,0,0.25);
-webkit-box-shadow: 0 0px 1px rgba(0,0,0,0.25);
}


otoemlak (ZURB) says

I'm just looking for this style! Thank you for sharing!!


Dozza (ZURB) says

Can we use this to target standard browser 'input' form buttons, e.g: the one below?


Łukasz (ZURB) says

not to be rude, but this might confuse others. But you say "edit these three lines of css" its actually all 4 you have to edit. just thought I would mention it. great post though! this is most excellent.


web design Australia (ZURB) says

Nice tutorial for button creation that looks amazingly attractive than simple buttons.Nice post.


sateesh (ZURB) says

Thanks,

Nice tutorial for button creation that looks amazingly attractive than simple buttons.Nice post.


ikiz (ZURB) says

Thank you for sharing! i think it's great with css3


requirements definition (ZURB) says

There are some new elements that take the website design to a whole new ball game. Such as the ability to allow a 4th field to define alpha value (rGBA color), create rounded borders, drop shadow behind an element or even allow multiple images to be layered on the background.


Juegos (ZURB) says

Thanks for the great tutorial.


Petrus Theron (ZURB) says

Please put a huge "DOWNLOAD" button in your post. I searched for 5 minutes just to find the examples link.


Hospital (ZURB) says

Thanks for this very useful info you have provided us. I will bookmark this for future reference and refer it to my friends. More power to your blog


Chris Quinn (ZURB) says

I can't make the buttons clickable. What I am saying, is that a website design I am working on for a client. We decided to try these css buttons out and when I put a hyperlink into the buttons, and then click a button, it does not take me to the site that I defined.

Can someone help me out? email me at chris at cquinndesign.com and I will show you the code I am working with.


Tony (ZURB) says

Those are awesome buttons indeed, thank you so much for sharing them! Greetings from Germany :)


web design egypt (ZURB) says

best looking buttons ever! many thanks for the great post :)


web design egypt (ZURB) says

best looking buttons ever! many thanks for the great post :)


Da Vinci (ZURB) says

Thanks is awesome man. I manage to include the suggested CSS style button into my website. That is an ultimate thumb up!!!

Thanks again:)


shack (ZURB) says

How can I embed the css code as tabs in a static fbml?


metin2 (ZURB) says

Google Translate Thanks You


Lynn (ZURB) says

I'm having some issue with the large buttons in chrome. The text inside the button disappears and instead there is a box with a grey outline in it's place! Any thoughts?


Oyun (ZURB) says

Thank you for sharing! i think it's great with css3


Oleg (ZURB) says

THANK YOU! Good POST!!


sawebdesigns (ZURB) says

Great tutorial thank you so much


vsanta (ZURB) says

I loved your buttons, they are really awesome indeed. The only thing I had to adpat is that in my markup the buttons are input submits so I added a thin border using the same color in the background ;)


Lateph (ZURB) says

Greet thanks I like it


Strawberry Utopia (ZURB) says

These are awesome. Mind if I use them in my personal website?


Wallpapersmash (ZURB) says

to use with buttons add these to .awesome, .awesome:visited

border-top:0px; border-right:0px; border-left:0px;



Get a job, nerd!

via Job Board from ZURB