Creating Rounded Buttons with CSS Sprites
Posted on 23 March, 2009 at 18:31 PM
There are already 18 Comments
About the Show
As a continuation from our previous sprites tutorial David, using CSS, shows you how to create dynamic rounded corner buttons.
Download the source file: Button Sprites Source File (zip)
Don't forget to vote for us for SA Blog Awards!
Related Shows
- (1) Episode 189 - Using Inspiration Effectively
- (5) Episode 187 - Design with the Lights On
- (8) Episode 186 - Apples and Oranges
- (2) Episode 185 - Design like a Dictator
- (7) Episode 179 - It's All About Themes
User Comments
David Perel 23 Mar, 2009 19:16:49 PM
@Frujo - Thanks very much. The reason I used the whole image is because not all images will have a solid colour. People may choose to add fades or textures to their rounded corner jpg. With that in mind I decided to use a long image for the tutorial.
Marko Novak 24 Mar, 2009 09:50:19 AM
HI, this is nice presentation, but it's not very useful. If you're doing the rounded buttons, you shouldn't do it with .jpg images. What happens if you have gradient for a background or you'll be changing background color of the site. It looks ugly, because rounded corners aren't transparent.
What you should use is .gif or better .png images. But here's the problem, this method doesn't work with transparent images, because image background is visible under the transparent rounded edges and therefore ruins the effect.
I just don't see any good in making rounded corners that are not transparent.
David Perel 24 Mar, 2009 09:54:10 AM
It all depends on the application Marko, if your background colour is solid then this method works perfectly well. I agree that if the situation requires transparent images that it doesn't work. But not all instances will dictate that.
David Perel 24 Mar, 2009 10:27:31 AM
@Marko - I don't agree with that at all. Anything thing which is created for a particular design must be created for that design. There is no right or wrong to using png's or jpg's if the design can suit it.
It has nothing to do with design practice, it has to do with design relevance.
Bad design practice would be something like straying off a defined grid or executing bad margins and padding.
andz 24 Mar, 2009 11:08:18 AM
nice, but too simple, what if clients wants to change background on hover?
Marko Novak 24 Mar, 2009 11:40:50 AM
Argh...no edit comment function.
What if client wants to change background of the site? You'll have to change all images then. It's just not handy. You have to support that kind of features in your design or you'll have a load of work to do for every single change.
I guess this type of thinking is more appropriate for a coder, but hey....if you want to be great designer, you have to know how to code.
frujo 24 Mar, 2009 12:34:18 PM
@Marko and @Andz. To my mind this tutorial (just as many others here) is not about showing people the best way of creating rounded buttons using sprites. Its aim is to show the basic approach and methods. Knowing them you may develop the way of creating buttons of your own.
RichardW 24 Mar, 2009 13:01:48 PM
Good tutorial! It's worth noting, to those who cannot figure how you can control the height of a floated element which is not explicitly defined as block-level, when you float an element it becomes a block box. And so you you can have dynamic width (as with an inline element), but can treat the element as a block (height, padding top and bottom etc)...
Marko Novak 24 Mar, 2009 13:52:59 PM
Don't get me wrong....I didn't say this wasn't good tutorial. There's just some things that aren't explained which I would like to know if I were a beginner.
David Perel 25 Mar, 2009 15:18:29 PM
Peeps, I fully understand what Marko is saying. He is right, in certain instances it isn't ideal and maybe I should have mentioned that.
But I only post tutorials that I use, and in this case I used this method for tabs in our new Theme admin panel. So to my mind it works perfect :P
And if the client wants to change the BG colour then it isn't difficult to change the buttons bg colour either. It takes 2mins to change that.
@RichardW - Thanks for the tip mate, I will keep that in mind when doing similar tuts :)
icetrix 31 Mar, 2009 13:20:46 PM
Great tutorial! Like it alot... Off course the "no-transparency" isue... still this is a very nice method to use and more solid then CSS3 (ie...) rounded corners.
Anywayz, thanks alot! Never used sprites before.
P.s. Just change the width to auto and it will readjust... easier in my opinion.
Leyton Jay 22 Sep, 2009 12:20:12 PM
Excellant tutorial guys, a clever way of doing it as well!
Needs some fine tuning in Opera 10 and the dreaded IE6 (which I'm embarassed to still be supporting) but otherwise a fantastic solution!
Cheers!
David 22 Oct, 2009 04:55:28 AM
Nice tut. Will definitely give it a try. One question though? How cross-browser compatible is this method? Good in IE6, 7, 8?
Leyton Jay 22 Oct, 2009 10:32:15 AM
With careful fiddling Firefox, Chrome, Opera and Safari will fall into line on a single stylehseet.
It does require a seperate stylesheet for IE 6 / 7, but thats easy to add with conditional markup.
Use [if lte IE 7] to serve stylesheets to IE6 and 7 ('lte' means less than equal to), then use [if IE7] to serve a stylesheet just for IE7.
IE8 seems fine using the main stylesheet when you just correct IE6/7 in this way.
Drop a Comment
2010 © Obox Design
From the Couch is powered by OCMX Live
Contact us on +27 21 791 0292
frujo 23 Mar, 2009 19:11:32 PM
Once again I must admit you made a nice tutorial for beginners and it leaves them a great area for improvement. For example, I decided to get rid of assigning a class to every list item (this is making list much better for usage under CMS). All you have to do is just change CSS part for "ul.round_buttons li" and "ul.round_buttons li a" to:
ul.round_buttons li{ background: url(images/button_sprite.jpg) left no-repeat; height: 22px; padding:0 0 0 10px; margin-right:10px; float: left; } ul.round_buttons li a{ background: url(images/button_sprite.jpg) right no-repeat; display: inline-block; padding:3px 10px 0 0; height: 19px; color: #fff; text-decoration: none; } This way widths of list items are depending of the widths of their contents and have equal padding of 10px from left and from right.
There is a room for some more improvement. Like we don't really need that long image. We nned only rounded corners areas, while the middle-part may be created with" background-color" CSS-property.