Log in

View Full Version : Button with rounded corners without CSS3


Wisdom
08-18-2010, 12:54 PM
Can anybody tell me how can I make a button with rounded corners without unsing CSS3 codes.

http://img191.imageshack.us/img191/5058/rounded.png

Thank you :)
Beverleyh
08-18-2010, 01:02 PM
I think for a menu button the simplest thing would be to use an image, otherwise you're creating a lot of unnecessary markup and CSS.
Wisdom
08-18-2010, 02:17 PM
I know, but the image must somehow extend with the width of the button.
traq
08-18-2010, 02:40 PM
http://jquery.malsup.com/corner/

^ uses css3 in browsers that support it (most besides IE; saves lots of time) and builds multiple <div>s to create the corners otherwise. The odd (non-round) corners are all javascript.

There are, of course, plenty of methods for creating extra <div>s or <span>s with rounded-corner images, but the jQuery plugin is much simpler and less prone to problems.
Wisdom
08-18-2010, 03:18 PM
Thank you, but I really don't know to work with jquery :(

If there isn't another way
jscheuer1
08-18-2010, 03:38 PM
To do this with the minimum amount of css, and all just common css, you would need two or three images. That's for a button that's always going to be the same height.

The images:


left side
right side
possibly middle (if the button has a top to bottom gradient or some other workable pattern/texture and/or top-bottom edges to it)


So you have three divs float left in a container div. The first has the background-image for the left side, no repeat. The second has either the background image for the middle, or a solid color background, it's foreground is the text of the button. If using an image, the background is repeat-x. The third has the background image for the right side, no repeat. The height of all three divs is the height of these images, which of course should be uniform. The width of the 1st and 3rd are the width of their respective images, best this also be uniform. The width of the center is not set, the text and left/right padding (if any) will determine that.

A sprite image may be used for the left and right side. But that's a fine point and would require a little more css.
traq
08-18-2010, 05:13 PM
jQuery is actually pretty easy.
<!doctype html>
<head>
<!--include jQuery library (hotlinking is O.K.!)-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!--include corner() plugin-->
<script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
<!--
write a document.ready function that tells which elements to put corners on.
the indented line (" $("#button").corner(); ") is the one you'll change for you purposes.
" .button " means "element with class=button"
-->
<script>
$(document).ready(function(){
$(".button").corner();
});
</script>
</head>
<body>
<!--make sure everything that should have corners
has the same class ( in this case, "button" )-->
<div class="button">button text</div>
</body>
</html>
Beverleyh
08-19-2010, 09:31 AM
ooh, I like those jQuery corners - something else for me to play with! Thanks traq

Wisdom, jQuery may sound scary but it really will open many doors for you as far as web enhancement goes. Start small and just play with very small functions until you get the hang of it - its very easy and there are planty of tutorials on the web.
traq
08-19-2010, 01:23 PM
actually, the best thing about those corners is that it only draws all those extra <div>s when it has to - if the browser supports it, it just applies the border-radius or vendor equivalent (for round corners; obviously the weird shapes are all markup-heavy).
coothead
08-19-2010, 11:12 PM
Hi there Wisdom,

the use of Jquery to solve this problem is comparable to taking a sledgehammer plus a demolition gang to crack an egg. :D

Check out the attachment for a lightweight solution that uses just one image and very little css. ;)

coothead
Wisdom
08-25-2010, 08:08 AM
Thank you all for your replies !

Sorry for the absence (trouble with the internet)

coothead, I like your solution, but does it work for transparent buttons as well ?

Thanks!
coothead
08-25-2010, 08:21 AM
Hi there Wisdom,

I looked at the image in your original post and proceeded to replicate it.

The css code displays the button, in all it's glory, on hover. ;)

What other result, exactly, do you require?

coothead
Wisdom
08-25-2010, 10:27 AM
Hi,

I'm talking this:

http://img842.imageshack.us/img842/7375/edgej.png (sorry for the bad rendering)

Just the button (as png), with no background
coothead
09-03-2010, 09:35 AM
Hi there Wisdom,

for this single image method to work requires that the area outside the rounded corners has the same background-color as it's container.

Check out the attachment for clarification. ;)

coothead
Wisdom
09-04-2010, 12:55 PM
I understand, if it's not possible, I'll still use this method :D

Thank you!
Wisdom
09-06-2010, 01:47 PM
Hello, I'm bumping again with a related question.

how can I make the meniu vertical ? With the ability to extend as well ?

Thanks.
Wisdom
09-18-2010, 03:00 PM
Bump :(
Wisdom
09-27-2010, 04:27 PM
I know you may be verry busy but I'd like a reply :(