Pushing Your Buttons With Practical CSS3

Advertisement

CSS3 is the partially implemented sequel to the CSS2 spec we all know and love. It’s already popping up in new browsers such as Firefox 3.5, Safari 4 and Chrome. In this article, the first of the articles that explore practical (and even far-fetched) implementation of CSS3, we start by applying CSS3 to something we all have to create: buttons.

Calls to action are critical for any website, and a compelling, attention-grabbing, clickable button goes a long way toward driving that engagement. In the past, really awesome buttons needed extra markup, sliding doors or other trickery. We’ll show you here how to create nice button styles without any hacks or cheats.

Step 1: The Super-Awesome Button

Some time ago we published a post titled “Super Awesome Buttons with CSS3 and RGBa1.” Those buttons will be our first step to creating buttons that really click. We will briefly review the technique and then extend it, fixing the problems that we have encountered along the way.

Using Box-Shadow and RGBa

Our first goal when we were about to create a versatile family of buttons was to eliminate the problem that HEX-based drop-shadows have on different backgrounds. As you can see below, we can use box-shadow to create a drop-shadow, but the shadow color doesn’t work on both dark and light backgrounds. To get around that, we used a color model that is available in new browsers: RGBa.

Screenshot

RGBa works like the standard RGB model — 255, 255, 255 for white, for example — but has a fourth property that controls the alpha, or transparency, channel. In the buttons above, the gray shadow that we created for the white background is much too light against the dark background. However, using RGBa we can create a black shadow that is transparent. This allows the shadow to work against any kind of background:

Screenshot

button.awesome, .button.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);
	…
}

That solves our box-shadow problems. All that’s left is a dash of CSS properties and a simple PNG overlay to create a finished button that can be restyled with any color, on any background, and that will work just fine.

The Amazing Border-Radius

Creating objects with rounded edges has always been a mess on the Web; after all, every object on the Web is a rectangle. CSS3 makes our lives a little easier by implementing an incredibly easy way to round off objects without sliding doors or obnoxious background elements. With these buttons, we’re using a standard background color and a PNG overlay to give them depth. We are not using a background image to round the edges.

button.awesome, .button.awesome {
	…
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	…
}

Currently, Webkit (Safari, Chrome) and Firefox have slightly different implementations of border-radius. Webkit will round off functional elements (like images), while Firefox will not. However, both will very cleanly round off an object and mask the background image, color or both (as with our buttons).

If you get in close, you can see that the borders behave a little strangely at the pixel level, but for the most part border-radius is a great way to bring rounded edges into your design without the mess. Here’s the complete CSS for these buttons:

button.awesome, .button.awesome {
	…
	background: #222 url(/images/alert-overlay.png) repeat-x;
	display: inline-block;
	padding: 5px 10px 6px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	line-height: 1;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-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);
	position: relative;
	cursor: pointer;
	…
}

Final Touches

We’ve created the standard buttons you can see above, but another great thing about buttons that don’t use images is that we can create any color we want and with some simple class names generate an entire repertoire of buttons that we can call on any time. This is great for creating a reusable set of buttons that can be adapted to your or your clients’ style guide. Check out the color codes that we are using:

.blue.awesome {
	background-color: #2daebf;
}

.red.awesome {
	background-color: #e33100;
}

.magenta.awesome {
	background-color: #a9014b;
}

.orange.awesome {
	background-color: #ff5c00;
}

.yellow.awesome {
	background-color: #ffb515;
}

These simple classes allow us to quickly call on the button we want to get the action we need users to take. We’ve used similar methods in the buttons we’ll walk through in the next few sections.

Our last step is sizing. Without a sliding-doors situation our button size is only limited by the size of our overlay image (and in future buttons, not even by that). We’ll use a few classes (small, medium and large) to create sizes that we can call in different situations.

Screenshot2
The buttons in various sizes: an overview.

And that’s it! A scalable, easily configured set of buttons that works in all browsers (through graceful degradation) and will get you the impact you want. In the next few sections we’ll build on these buttons to show you how CSS3 can push these even further in some interesting directions.

Screenshot3

See the live demo »4

We’ve created a live demo page for these buttons; it’s in a playground, where we create small side projects and cool toys. We’ll be linking to the playground examples throughout this post and the rest of our series.

A note about compatibility: true to form, IE8 does not support border-radius. At ZURB, we’ve adopted a “graceful degradation” paradigm, so these corners will be square in IE. In our experience, the additional development cost for elements like this is not worth it, and we rely on these properties to cleanly degrade and not damage the layout or readability. These buttons are no exception: they are still as clickable in IE as anywhere else, just not quite as pretty.

Step 2: Radioactive Buttons

Now that we’ve gotten our feet wet with CSS3, let’s go in a different direction. For a recent client project, we wanted to create a stylized, attractive and eye-catching call to action for the home page. We came up with the idea of a radioactive button, a button that actually pulses on the page for more attention.

Screenshot5

Kitschy? Maybe a little. But despite its impracticality, for some websites and clients, the “Wow” factor—that feeling the user gets when they arrive at a website and say, “Oooh, ahhh!”—can’t be ignored. Where we only used to have , thanks to some tricks we’ve already covered (and one we haven’t), we can move beyond that terrifically obnoxious blink tag and explore a whole new range of opportunities to animate using pure CSS.

Animation: No JavaScript Required

The secret to the radioactive button is in a new CSS3 property called animation (or, as it currently exists, -webkit-animation and -moz-animation). Our radioactive buttons are structurally and stylistically identical to the buttons in step 1, but with one important change. In lieu of a static drop-shadow, we’ve used the box-shadow property to create a glow around the button. With “glowing shadow” added, the next step is to use CSS3 animation to dim and brighten it.

Creating the Animation

The first step in our radioactive awesomeness is to create a timed event that modifies existing CSS properties. Check out this odd-looking property:

@-webkit-keyframes greenPulse
{
	from {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
	50% {
		background-color: #91bd09;
		-webkit-box-shadow: 0 0 18px #91bd09;
	}
	to {
		background-color: #749a02;
		-webkit-box-shadow: 0 0 9px #333;
	}
}

Here’s how the code works:

  • @-webkit-keyframes tells the browser that we’re defining an animation based on keyframes, or points in the animation to where properties will change. The browser then knows to smoothly transition between those frames.
  • greenPulse is the name of the animation. We need this to attach to objects later on.
  • from { … } defines the starting point of the animation; in our case, a certain background color for the button and a box-shadow color (particularly, one that disappears into the background).
  • 50% { … } means that one change happens halfway through the animation.
  • to { … } defines the last frame of the animation. Note that animations always return to their from state—they don’t stop on the last frame. This means that a smooth animation needs to begin and end with the same properties and values.

All right, we’ve created the animation. It takes an object and over a set time changes the box-shadow color to green and then back to gray. Now, we just have to make it active by applying the animation to our buttons.

.green.button {
	…
	-webkit-animation-name: greenPulse
	-webkit-animation-duration: 2s;
	-webkit-animation-iteration-count: infinite;
	…
}

Pretty cool, isn’t it? -webkit-animation has many potential uses and, when combined with some very simple JavaScript (like onclick), you can create very rich effects and interaction without resorting to a JavaScript effects library.

Screenshot6

See the live demo »7

Check out the live demo of radioactive buttons in our playground. For maximum awesomeness, check it out in Safari 4; radioactive buttons use some Webkit-specific properties that aren’t implemented well in Chrome quite yet.

Nice, Simple, User-Friendly Buttons, Google-Style

Our last example was inspired by some recent changes made to one of the most trafficked pages on the Web: the Google search page. In addition to enlarging the search field and text size, Google also rolled out some new buttons for Webkit-based browsers (notably its own, Chrome).

These buttons incorporate everything that makes our buttons in this article great, with one cool trick: no images at all. Google has used a new property called -webkit-gradient to generate a gradient using only CSS.

Screenshot8

Using CSS Gradients

Gradients in CSS are cool because they are a CSS function, much like url(), which means that we can use gradients anywhere images go, including in the background or in borders (don’t worry, we’ll get to border-image in a later post). Here’s how gradients work:

.g-button {
	…
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(98,202,227)));
	…
}

Let’s break this down:

  • linear means this is a linear gradient, as opposed to radial. This changes the color across a single axis, rather than in concentric circles.
  • 0% 0%, 0% 100% are coordinates. We’re saying that the gradient begins at 0% X, 0% Y and ends at 0% X, 100% Y: top-left corner to bottom-left corner. We could use top-left, bottom-left just as well.
  • from(rgb(255, 255, 255)) is the starting color for the gradient. If the syntax looks familiar, it should be: it’s very similar to the syntax for @-webkit-keyframes.
  • to(rgb(221, 221, 221)) is the ending color. While we have only used RGB here, you can see how gradients could get really interesting if we use RGBa and are able to control the opacity of points on the gradient.

The rest of the button is ordinary: padding, border-radius and all the fun things we’ve gone over so far. Gradients is the star here, though, and it has thousands of potential uses. Here, we’ve created (albeit in Google’s footsteps) rich, engaging buttons that are 100% CSS, no images required.

Screenshot9

See the live demo »10

You can see a live demo of these buttons in the playground, or simply visit the Google search home page in a Webkit browser.

Coming Up: Better, Stronger, Faster Design

This is the first of the articles that take advantages of the powerful new features coming in CSS 3. In the following posts, we’ll show you how CSS3 not only can make implementation faster and easier, but can help you really fly off the rails and push CSS to its breaking point while creating impressive visual effects.


References and Resources

(al)

↑ Back to topShare on Twitter

ZURB is a close-knit team of interaction designers and strategists that help companies design better products & services through consulting, products, education, books, training and events. Since 1998 ZURB has helped over 75+ clients including: Facebook, eBay, NYSE, Yahoo, Zazzle, Playlist, Britney Spears, among others.

  1. 1

    Super Awesome.

    0
  2. 2

    YEY! That’s a great way to design. Clean and simple!

    0
  3. 3

    Love it – cannot wait to start using them when CSS3 has higher cross-browser support.

    0
  4. 4

    You should check out the Fancy Buttons Compass plugin. You can get even nicer buttons with less work. Also they degrade nicely for older browsers!

    Demo & Screencast:
    http://brandonmathis.com/projects/fancy-buttons/

    0
  5. 5

    I love ZURB playground :D

    0
  6. 6

    Some awesome techniques used. Very helpful, cannot wait until EVERY browser supports this stuff. Though not the glowing stuff. I can see over use of that and I can see that it might become something of an annoyance, much like scrolling text or blinking text.

    0
  7. 7

    Very nice tut. I just wish I would not have to compensate for IE, would make implementing these functionalities so much more fun.

    0
  8. 8

    Instead of animation, we can use transition (or -webkit-transition, -moz-transition) to make nice hover effect.
    For the gradient, we have also -moz-linear-gradient (which have a better syntaxe according to futur implementation into CSS3)
    Note the for some specific properties (-moz or -webkit) we should also use the syntaxe whitout the “-specific prefix” to make it compatible in the futur :)

    0
  9. 9

    This is a great article, except for the fact that I had to load Safari.

    0
  10. 10

    That’s awesome! I wish CSS3 was a standard on every browser right now, because I’d love to start using these techniques on everything.

    0
  11. 11

    What is the CSS3 reach so far?

    0
  12. 12

    63% of people are really going to appreciate the work you put into your cool buttons. However, 37% of people are going to wonder why your website looks bad.
    Buttons are just too important not to use images for. Unless less people use IE suddenly (I wish).

    Of course you could spoon feed IE some images for better buttons but that sounds like a lot of unnecessary work.

    0
  13. 13

    Blue Sail Creative

    December 2, 2009 8:27 am

    We have begun to adopt CSS3 onto our Web site at bluesailcreative.com , did some cool stuff with the project detail page.

    Would love others opinions.

    0
  14. 14

    Great compilation!

    Damn IE users! I’ve been using some CSS3 already and oh well, IE users can keep on looking at those plain buttons, I won’t mind about them. So much goodness for the rest of us woohoo!

    0
  15. 15

    Love CSS3 new features ;)
    Thx for this great post !

    0
  16. 16

    This is so exciting! I’ve been implementing CSS3 in my own projects. These new CSS3 properties save so much time and effort! Can’t wait til all browsers fully support it.

    1
  17. 17

    old… saw this a long time ago…

    0
  18. 18

    How do these roll back in older browsers? That’s be interesting to know.

    0
  19. 19

    I have already started using CSS3 but only on certain sites and for certain elements. That’s the great thing about web design; we have many, many tools and we can use any one of them whenever the client allows us.

    Yes IE sucks big time but that doesn’t mean you ignore these techniques because sites will come along where they would fit in perfectly.

    0
  20. 20

    Brilliant!

    Just in time for a new project I’m working on!

    Thanks

    0
  21. 21

    I actually looked in IE8 and it’s OK, they rollback pretty nice.

    Gonna definitely have a go at this!

    With a bit of IE conditional code to maybe display a different set of background this could work really well.

    0
  22. 22

    Such low browser support; not everyone uses Safari.

    0
  23. 23

    Love the CSS gradient technique it’s something I’ve just started playing with…shame most of my users will never get to see it work in real life!

    0
  24. 24

    this is a great informative post, but in future CSS3 posts please include details about how it works in IE, and whether or not workarounds are required–then detail those workarounds.

    0
  25. 25

    I’d second to what ryan said. Considering IE still has 50+% (IE6+) of the market, most professional applications will be ran on IE. Until IE catches up, it would be nice to see alternatives or even a small comment about it not currently being available in IE. It’s good though that IE will just ignore the look but function correctly.

    0
  26. 26

    Do you have screenshots of what these look like in olde IE?

    0
  27. 27

    finally something useful!
    not a list :)

    0
  28. 28

    Jewen Soyterkijns

    December 2, 2009 10:20 am

    “Nah You should visit my site in a modern browser, else no call to action for you”.

    Why don’t you make some flash buttons? Support for flash is wider spread than css3, you can even make the buttons rotate 360 degrees while making whistling noises! Both will degrade horribly anyway.

    Very good article though, I am just whining: Sliding doors or sprites are techniques to look at when you want to develop robustly and for reality.

    When designing for the web effectivaly, you want to convey information. You are trying to send your message to the largest audiance possible. Critical design features such as call-to-action buttons are a large part of creating a successfull story. When you fail to convey this information to older browsers, you failed as a webdesigner. CSS3 is not like a new version of Photoshop. Webdesign is very different from print design.

    Don’t choose to convey your message in a leetspeak that only few will understand and appreciate.

    0
  29. 29

    Are the CSS Gradients you use at the end of the article actually planned for CSS3?
    It’s the first time that I hear about the gradient-property and it would be amazing if it would become (or already is) an official part of CSS3.

    0
  30. 30

    Realmente interesante, diseñemos óptimamente para CSS2 y mejoremos la experiencia a los navegadores con CSS3 .

    Thanks

    0
  31. 31

    this is a repost from an article back in July on SM…. someone’s obviously got some mates at SM who wanted a bit of free advertising….

    0
  32. 32

    how do those glowing buttons not work in Firefox??? great post though thanks for the effort!

    0
  33. 33

    Why does he use background overlay to do the gradient instead of -moz-linear-gradient() and -webkit-gradnient() ???

    0
  34. 34

    Smashing Editorial

    December 2, 2009 12:07 pm

    No, it isn’t. And if you read this article carefully, you would have noticed it.

    0
  35. 35

    Professionals never use browser-specific features for key elements of their designs.

    What client would pay me to spend the time making buttons invisible to 90% of their customers? It’s too early to be using CSS3 tricks in real applications.

    0
  36. 36

    Good post, but for some reason the Google-style buttons do not work in my browser. I’m using the latest version of Firefox in Windows XP, so I find it strange the CSS isn’t applying properly.

    0
  37. 37

    RE: Radioactive Buttons with no JavaScript required. Even in Safari 4, which is the preferred browser, the animation isn’t as smooth as a JS-animated button. And at least for right now, animation using JS is a lot more cross-browser friendly than the method outlined above (which works only in Safari 4, and doesn’t compare to JS animation).

    Compare the live demo linked in the article, to Dragon Interactive’s nav bar that uses JS for the animation effect: http://dragoninteractive.com/

    That works in browsers as old as IE6.

    0
  38. 38

    To everyone querying how these buttons work in IE (and other browsers that don’t support the properties being applied), I can only speak about the super awesome technique, because it’s the only one I’ve used, but they work just fine. OK so they’re not rounded and don’t have the shadows, but they will still have the bg-color and gradient (you can either use AlphaImageLoader fix for IE6 or let that browser miss out on the gradient), so they still stand out as buttons. Personally I’d still go with using a bg-image for the gradient rather than CSS gradients at the moment because of the limited support for the CSS option but you don’t have to worry about your buttons being broken – they’ll just look a little less slick than they will in Safari, and like Andy Clarke says: http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    0
  39. 39

    Go back and read the article again:

    You can see a live demo of these buttons in the playground, or simply visit the Google search home page in a Webkit browser.

    0
  40. 40

    Higher cross-browser support meaning IE… :(

    0
  41. 41

    I have to say, I still like the overall look of the buttons presented in this article over those at the link. Perhaps it is the overall presentation not the method.

    0
  42. 42

    I love these buttons, they look fantastic. I agree that it’s early to start creating things that only work on a small minority of browsers but it’s not like you have to start from scratch with every project, the buttons are pretty reusable and low maintenance. My only plea is do not remove the outline property of a button or link unless you’ve defined a specific focus style.

    0
  43. 43

    Nice buttons!

    0
  44. 44

    Freaking Awesome :D

    0
  45. 45

    How do the buttons in #1 look in non-compliant browsers?

    0
  46. 46

    Lovely! :D
    but IE………………..

    0
  47. 47

    Simply love the CSS3 tricks. But it is not working in ie6. Any solution for that???

    1
  48. 48

    Nice Tricks :)
    Thanks :)

    0
  49. 49

    Great article, as allways. Great technology, great idea. But… How many people will appreciate it when IE is most used browser? FF is popular mor or less only in Europe. Opera has only one-digit popularity.
    Until FF wont detronize IE or MS wont improve their browser ideas like shown in current article will be for art sake only.

    0
  50. 50

    A anoying thing is that you can still select the text on the buttons.

    0
  51. 51

    Isn’t this just like the tag we once fought was a nice trick… HTML 5 and CSS 3 have great features but there are some that make confuse me, we shouldn’t forget to keep content and interaction separated…

    Want a pulsing button – witch would be awfully annoying if you ask me, it’s a bit like an old flash website where everything tries to catch your attention so desperately your eyes go watering – but still, if you want a pulsing button, that would really be a javascript thing, it’s not part of the markup or style.

    Support for all these features that don’t deserve doubt should go up fast enough, even IE can’t stay behind I guess. Supporting browsers will be so much faster now that we need only half the images they used to, users will notice soon enough.

    0
  52. 52

    true true.

    0
  53. 53

    Love this, but… I think we should use more standard techniques like sliding doors (the “one image” sliding door for example) and use a “progressive enhancement” css3 like shadows for latest browsers, soo the buttons looks pretty in IE and will look *awesome* in FF, chrome ect ect browsers.

    0
  54. 54

    To design buttons with CSS3 is surely great and convenient, but until 95% of the Browsers in use support that it is more a theoretical solution as a practical one.

    0
  55. 55

    Pretty nice stuff, but in the moment pretty useless for me. In my sphere only about 4 % of people use Safari 4.x for browsing. And I don`t like to put extra effort into something for just such a small audience. If everything would function in Firefox I’d love to use all these CSS properties and don’t care about IE (although still 65 % of the people use it at my company’s website). Besides that, here only 17 % use Firefox 3.5 and 9 % version 3, so many of the features won’t even be seen by FF-users …

    Don’t get me wrong, I love to push the web forward and use everything the new technologies have to offer. But there has to be a point where to have to make a break and think if you reach enough people. It’s nice that some people can experience all this stuff, but the majority can’t – which is very sad and doesn’t justify the extra time.

    0
  56. 56

    LoL @ Radioactive buttons! My computer is going nuts (no smooth scrolling anymore) but its fun!

    0
  57. 57

    Perhaps it’s too early to use the CSS3-tricks on clients projects, but I like to be moving, growing and learning all the time, so I’ll consider using some of these tips on my own personal projects. In that way I’m ready and familiar with the tecniques, when my clients also are ready for it…

    Thanks for this article, that summons up the latest article and expands it further.
    I would like to get some oppinions on IE – if you know of any plans from them on CSS3…

    0
  58. 58

    This is great and all, but until CSS3 can do blinking text I’m not interested.

    0
  59. 59

    just bad that I saw this post on zurb a whiiileeeeee ago, but more of this techniques would be welcome for sure.

    0
  60. 60

    Oh all very awesome. But we still can’t have variables in CSS, right? We still have to remember and type out the RGB (or indeed RGBa) code for that special corporate nuance of magenta in every single class that uses it. And why? Well, because the CSS wizards have decided *that it would be too much work for the browser* to parse the CSS then. But gradients, round corners etc etc are not hard work for the browser then?

    And another thing, slightly related: why oh why do we have to learn three completely different syntaxes for HTML, Javascript and CSS? Why is it zIndex in one and z-index in another? Why (oh why) couldn’t at least CSS have been designed as an SGML language? Like this, for example:

    No, that would have been too simple, I guess… :-(

    0
  61. 61

    Oh OK, didn’t work – let’s try this:

    <css class=”blue awesome” backgroundColor=”#2daebf” />

    0
  62. 62

    Nice article but why use CSS3 when the browser support is so bad?
    Using images for buttons will give the same apparence in almost all browsers.

    0
  63. 63

    Just amazing! Love the buttons!

    0
  64. 64

    great post! thanks

    0
  65. 65

    IIE9 is supposed to fully support CSS3. We’ll see …

    0
  66. 66

    Let’s shout loudly to IE: be compatible to the rest of the world, we are a happy family after all! :-)

    0
  67. 67

    Totally agree, it would save so much time optimizing your site for IE if IE handled CSS3 correctly.

    Also it would take less images, so less bandwidth. And restyling of your elements would take less energy. I could go on forever about the downside of IE, but i’ll call it day.

    0
  68. 68

    This is one of the best things or buttons I’ve seen in so many days.. really “Awesome” buttons.. many thanks Zurb and Smashing Magazing ! :)

    0
  69. 69

    Works on ie6? “!works”

    0
  70. 70

    Don’t worry – we’ve got 2 more articles lined up that build on these techniques and tricks to do some really wild stuff with CSS3, stuff that hasn’t been on our own blog yet. Stay tuned :)

    0
  71. 71

    Thanks for the comments everyone, we love hearing what people think about our little experiments. Obviously the radioactive buttons are hilariously easy to overuse and coming pretty close to the blink tag, and the Google buttons only work in Webkit, but that’s what this article is all about: what’s coming, not what’s practical today.

    If you want to make practical buttons there are tons of great resources for that (and in fact the first button set in this article degrades pretty well) but we wanted to push it and have some fun. Hopefully you’ll have some fun with all of this too!

    0
  72. 72

    Part of the choppiness in ours comes from having something like 40 on the page – you’re right that javascript can do some smoother tricks, but the beauty of using CSS3 is that browsers are already starting to call on the graphics card to render effects.

    In the future CSS3 effects will likely be able to call on a lot more horsepower than javascript will ever be able to. You should check out Webkit’s 3D transforms to see what I mean.

    0
  73. 73

    This tutorial is not well explained. The errors that where solved for IE6 are not explained and the example doesnt supply the stylesheet in a separate file. The author mixed all the website styles with the button ones and the example doesnt use the same styles used in the tutorial. Also, the example does not have any styles for button elements. Only for A tags. The Styles provided in the tutorial will not work in button elements. This article is very interesting, but of no use for most of the people. Please supply a demo page with only the necessary css in a separate css file and with all the styles for both a tags and buttons.

    0
  74. 74

    Love this post! Please keep them coming…

    0
  75. 75

    I’ve been doing something like this on my buttons for some time. If you really want to make the buttons look like they’re being pushed when you click on them, flip the gradient for the active state.

    0
  76. 76

    Explain: why not just use javacript? Far more people are going to see it. It’s going to be years before even a small proportion of users are going to see this. It’s just not worth it.

    0
  77. 77

    The buttons in the article look quite nice even without the CSS3 styling. When using CSS3 the essential thing to remember is to make sure it looks good in CSS2, then add CSS3 as progressive enhancement.

    0
  78. 78

    It doesn’t work in IE at all yet. Even IE9 isn’t looking to have much support of CSS3. However, you can easily and safely add CSS3 as progressive enhancement.

    0
  79. 79

    The same as they look in the article but square and without a drop-shadow.

    0
  80. 80

    As long as you don’t rely on the glow on its own (i.e. you make sure even at CSS2 level it is an obvious call to action) it degrades perfectly fine.

    0
  81. 81

    Not even IE8 supports CSS3. IE6 never will (it doesn’t completely support CSS2 either)

    0
  82. 82

    That’s a good thing. It means it’s easier for search engines and text to speech readers to understand.

    0
  83. 83

    Floris Fiedeldij Dop

    December 4, 2009 3:42 am

    Interesting to see this post on SM, I wish there were articles like this on a daily basis!

    This site even uses very pretty buttons and polls, like the SM poll, and this comment button below this text area .. A prime example and a daily recommendation to my 5,000+ twitter followers, friends, colleagues, etc.

    Poll: More of the same? Hell yeah!

    0
  84. 84

    CSS is not a programming language. If you want variables in it, wrap it in your server language of choice.

    0
  85. 85

    This is great.
    except im too scared to actualy use it, considering i had to swap browser to see it.

    0
  86. 86

    That’s impressive. Thanks for this great post once again.

    0
  87. 87

    I still don’t like the active state for the buttons. Check this fork for an alternative
    http://www.elctech.com/snippets/make-your-buttons-look-super-awesome

    0
  88. 88

    Now it is too early to use css3

    0
  89. 89

    Carl - Web Courses Bangkok

    December 5, 2009 6:08 pm

    amazing to see the difference when you look at the buttons in ie , why o why are they so far behind

    0
  90. 90

    Ya no puedo esperar para que esto sea mas estándar, las propiedades ahorran mucho trabajo.
    Buen post

    0
  91. 91

    I’m curious as to weather css3 will validate or a way of adding it that is progressive without invalidating your page.

    0
  92. 92

    @smashingmagazine, we should all request the major parties to agree on one plate form to support all these type of materials. I’m much sick of making compatibility between browsers. Why they don’t have the same render engine? too many issues has not been solved yet. Even IE7 and 8′s render engine are not same. I amazed, they have too much difference.

    Is it not possible for all browsers??

    0
  93. 93

    @smashingmagazine, we should all request the major parties to agree on one plate form to support all these type of materials. I’m much sick of making compatibility between browsers. Why they don’t have the same render engine? too many issues has not been solved yet. Even IE7 and 8′s render engine are not same. I amazed, they have too much difference.

    Is it not possible for all browsers to have same render engine??

    0
  94. 94

    It is indeed possible for all browsers to use the same render engine. The obvious choice for this today would be WebKit, although three years ago the same argument could have been made for Mozilla’s Gecko engine.

    Microsoft has gotten underway on Internet Explorer 9, and posted an article on the IE Blog bragging about getting 32/100 on the Acid3 standards-compliance test (Gecko is over 90/100, Safari 100/100). You would not believe how bitterly the developer community argues for Microsoft to abandon its proprietary Trident rendering engine in favor of adopting WebKit.

    It doesn’t look like that can happen, due to the installed base of corporate customers who Microsoft suckered into investing in stuff that only works on various flavors of Internet Explorer browsers. So instead we’re going to have to suffer through at least one more generation of another incompatible-with-all-the-other-Internet-Explorers (6, 7, and 9 all require separate hacks for their various rendering quirks) before Microsoft admits the obvious.

    Those of you in the U.S. and Europe should thank your lucky stars. Here in Korea where I live over 90% of users are on IE 6 and there’s no hope in sight for change — because most users of Windows computers are on a pirated copy of Windows XP, there’s no Service Packs or upgrade for them.

    0
  95. 95

    These are super awesome buttons. I’ve followed ZURB previous post on their blog and have applied those to one of our projects. But with this post, these are sure a one-stop-solution to all of us working on the web, be it on design & development. Thank you very much.

    0
  96. 96

    I’ve integrated some of these ideas and concepts into my Sexy Buttons framework. It makes it super easy to add these buttons to your web site. Check it out!

    http://code.google.com/p/sexybuttons/

    0
  97. 97

    Yep, they sure are. Mozilla implemented them in Firefox 3.6 now – well on its way to being an official part of the final spec. Pretty cool huh?

    0
  98. 98

    So interesting post. I like the new css3 propierties but i don’t know a lot of these

    0
  99. 99

    I could have read it wrong, but you said Firefox won’t round of images, while webkit will..I round off images in a Zen Garden project I just completed, and they display fine in Firefox and Webkit

    http://www.cs.iupui.edu/~ar43/a455/zenGardenFinal/index.html

    0
  100. 100

    Hey! It’s great!

    BTW, Opera 10.50 (pre-alpha) now supports border-radius property.

    0
  101. 101

    Just amazing! CSS3 gives so much freedom!

    0
  102. 102

    Thiago A. Villa Menezes

    January 25, 2010 7:11 pm

    Maaaaan! What was that?! Is it only me or someone else out there is also stunned? God, I’m acctually feeling excited right now. I haven’t seen a so useful post for… like… ages

    It is sooooo good to see how far we’ve come, how easy our lives are becoming as you designers and us developers. Old times when we had to work rounded corners with JS, sprites and all the fuz.

    Yet, there’s the stone in our shoes, Internet Explorer. But, let’s be bright!

    Sometimes, clients and users won’t even guess what’s happening. For them, the buttons are pretty and work — and that’s the point, after all, buttons that really cool, but work! If they get to their destination, it’s alright.

    That said, I always make sure people around me that just user Internet in the daily basis get to know what’s happening. Not with the technical jargon, but in simple words. And guess what’s the expression? “Oooh, so it was that hard and now just that? And it’s just a bit of code? Like there was the K7 tape, then the CD now the pen drive?” Yeah, evolution, folks.

    I’m so happy *.*

    0
  103. 103

    Thiago A. Villa Menezes

    January 25, 2010 7:23 pm

    Yeah, I know what you say. Here in Brazil, it’s not different. Believe you or not, I come accross people saying “(…) but Internet Explorer is the best, it comes with Windows, aren’t we supposed to be using it?”.

    See? I don’t know out there, but here: 1) they think they should use the software only because it’s there, ready, installed, just open it and run; 2) it’s “the best” although they haven’t even tried others and aren’t open to try; 3) “it comes with Windows”, that’s why I install Chrome or Firefox in every Windows PC that I found running Internet Explorer LOL.

    Here we are still engaging technology in people’s daily lives, people like the baker next corner and the lady who cleans the street. It’s part of our digital inclusion program. So it’s an ongoing proccess and I make my part by showing the options, opening discussons on hot topics, it’s very democratic. The most rewarding thing is when they start telling their community about what they’ve learned. Sooo rewarding!

    In my college, we got our IT staff to install Firefox on every single computer on campus. People are using it, and noticing the difference!

    0
  104. 104

    I’ve been working on an IPOD touch app and was FORCED to use the web-kit engine and found out how to do the buttons you describe here and then all of a sudden I had an orgasmotic reaction. WOW! what a great way to design a page full of buttons the EASY way. Come on IE developers, wakeup and smell the CSS3 buttons, I mean roses… It’s about time you IE developers lead or get out of the way…..

    IE sucks bigtime in this area, if you can invent AJAX (httpxmlrequest) you can implement CSS 3!

    0
  105. 105

    Nice post …. Keep the CSS3 Tutorials Coming :D

    0
  106. 106

    nice post !

    0
  107. 107

    There’s one important thing – to get the same look in Safari/FF/Chrome you have to play with :-moz-focus-inner. The guys from zurb.com are doing so in their global.css. Otherwise you can spend long time wondering why using the very same css you still do not have the same look under those browsers while they do.

    0
  108. 108

    Just amazing! CSS3 gives so much freedom! But i got a small question, CSS3 supports all browsers but what about IE browsers? that style does not support IE. Do you have any solution for that?

    0
  109. 109

    And here’s my variation of buttons: http://www.cybernoxa.pl/projects/css3/buttons/ – what important – thre’s a focus state, which zurb buttons seems to miss. Yeah, I know ;]

    0
  110. 110

    Is realy cool

    0
  111. 111

    its very beautiful

    0
  112. 112

    Thanks a lot!

    0
  113. 113

    I find that you can send a link to your WordPress blog so your catoncts can see it for the first time and after that, all that person needs to do is to hit the RSS 2.0 button on the bottom of the page to allow it to hit’ their news reader such as Y-mail, Y!profiles or My Yahoo (they should be logged into the page for the RSS to find its way there) (this is what I used and it popped into my page and I accepted it for future updates. You just need to let your catoncts know where your site is at and the rest is up to them to acquire the link the way they want to.

    0
  114. 114

    Nice Article like it………

    0
  115. 115

    Hi all!

    Having problems implementing Radioactive Buttons with my website (alleagues. com). Any chance of more detailed instructions please? Awesome effect!

    Best regards & thanks.

    0

↑ Back to top