5 Different Tutorials For Creating Dynamic CSS Rounded Corners Link Buttons

5 Different Tutorials For Creating Dynamic CSS Rounded Corners Link Buttons

Round corners web links buttons may seem engaging and comfy to the eyes but do you know the techniques of their creation? If you have been creating round corners web buttons using the old school method by saving them as an image, then you probably should check out these enhanced, fast and easy way of creating round corner web buttons using Cascading Style Sheet,(CSS).

So if you are a web developer or designer and still have not try using CSS to create your corner button, you probably might be living in a well. It’s time to jump out of the well now, and explore into the endless possibilities with CSS. So, what’s so good with this Cascading Style Sheet, in short CSS? Well, by using CSS, it allows you to create button on the fly with just an anchor link. You only need to declare the design of the button in the stylesheet and you will have button appearing when you insert the anchor link. Plus, you need not have to worry about the width adjustment of the button or text alignment sticking out of the button if the text of the link is too long.

5 Different Tutorials For Creating Dynamic CSS Rounded Corners Link Buttons

[tut demo=”http://www.onextrapixel.com/examples/round-corners-button/” download=”http://www.onextrapixel.com/examples/round-corners-button/round-corners-button.zip”]

Below are 5 different tutorials on how to create Dynamic CSS Rounded Buttons. For each example, there have its pros and cons. Do give them a try and select the most appropriate method of suit your needs.

CSS Button

1. Two Images CSS Round Corners Button

This method of creating CSS button required 2 images to form the button. A bad point for this method is when you hover over the button, it will have a slight delay, before the rollover image actually shows up. The reason for the delay is because it is making a server request to load that rollover image onto your browser.

Below are the steps to create the round corner buttons for this method:

Step 1
Create a rounded corner image in Photoshop, with a 30pt radius on both sides.

Round Corner Button

Step 2
Turn on the guide lines, so that you can select accurately. Crop the selection and save as image.

Left Round Corner Button

Step 3
Now select the right corner of the button. Crop the selection and save it as an another image.

Right Round Corner Button

Step 4
Repeat the above steps 1 to 3 for the rollover image.

Round Corner Button Rollover

Step 5
That’s all for the images, now create the basic HTML unordered list.

<ul class="example1">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for 2 Images CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 1
************************************************/

.example1 li {
     display:inline;
     list-style:none;
}

.example1 li a {
     background:transparent url(images/buttonleft.jpg) no-repeat left;
     display:block;
     float:left;
     height:22px;
     margin-right:15px;
     padding:5px 0 5px 10px;
}

.example1 li a span {
     background:transparent url(images/buttonright.jpg) no-repeat right;
     cursor:pointer;
     display:inline;
     float:left;
     height:12px;
     padding:5px 10px 5px 0;
}

.example1 li a:hover {
    background:transparent url(images/buttonleft_ro.jpg) no-repeat left;
    color:#fff;
    padding:5px 0 5px 10px;
}

.example1 li a:hover span {
    background:transparent url(images/buttonright_ro.jpg) no-repeat right;
    color:#fff;
    padding:5px 10px 5px 0;
}

2. CSS Sprite Round Corners Button

Using CSS Sprite is rather easy and cool compared to the above mentioned method. And the good thing about using CSS Sprite is, there will be no delay for loading the rollover image when you hover over the button. It basically load the whole image when you first visit the site, and switches around the background position when you hover over the button.

Step 1
What you have to do is to stack the normal button design above the rollover button design and save both the button and the rollover as one image.

CSS Sprite

And that’s it, now create your HTML unordered list.

<ul class="example2">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

And here are the CSS properties for CSS Sprite round corners button.

/************************************************
 Round Corners Button Rollover Example 2
************************************************/

.example2 li {
    display:inline;
    list-style:none;
}

.example2 li a {
    background:transparent url(images/buttons.jpg) no-repeat top left;
    display:block;
    float:left;
    height:22px;
    margin-right:15px;
}

.example2 li a span {
    background:transparent url(images/buttons.jpg) no-repeat right top;
    display:inline;
    float:left;
    height:18px;
    padding:4px 10px 0 0;
    margin-left:10px;
    cursor:pointer;
}

.example2 li a:hover {
    background-position:0px bottom; color:#fff;
}

.example2 li a:hover span {
    background-position:right bottom;
}

3. FireFox CSS Round Corners Button

In your CSS, you can define Firefox 3 CSS properties in order to achieve round corners button, without the need of cropping or slicing any images. It’s amazing to see round corners button appearing without the use of images, but this only apply to Firefox 3.

And in IE, Safari or any other browsers, you will only see a normal square button without round corners, because they do not render Firefox CSS properties.

First create your HTML unordered list.

<ul class="example3">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Firefox round corners button.

/************************************************
 Round Corners Button Rollover Example 3
************************************************/

#container .example3 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}

#container .example3 li a {
    background:#fff;
    border:1px solid #ccc;
    padding:3px 10px;
    -moz-border-radius:15px;
}

#container .example3 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -moz-border-radius:15px;
}

4. Safari CSS Round Corners Button

There are also a different set of Safari CSS properties for Safari web browsers and it’s only allow to be render in Safari 4, and if you view them in other browsers, you will see a normal square button.

Again create your HTML unordered list.

<ul class="example4">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Safari CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 4
************************************************/

#container .example4 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}

#container .example4 li a {
    background:#fff;
    border: 1px solid #ccc;
    padding:3px 10px;
    -webkit-border-radius:10px;
}

#container .example4 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -webkit-border-radius:10px;
}

5. Combined Firefox and Safari CSS Round Corners Button

If you think. it’s fine that your IE visitors will not enjoy the beauty of the round corners button, then go ahead to combine the Firefox and Safari CSS properties. So only IE users will see this button as a square button, but for Firefox and Safari users they will see it as a nice round button.

Create the HTML unordered list.

<ul class="example5">
	<li><a href="#"><span>Home</span></a></li>
	<li><a href="#"><span>About</span></a></li>
	<li><a href="#"><span>Contact Us</span></a></li>
</ul>

Here are the CSS properties for Combined Firefox and Safari CSS round corners button.

/************************************************
 Round Corners Button Rollover Example 5
************************************************/

#container .example5 li {
    display:inline;
    list-style:none;
    margin-right:10px;
}

#container .example5 li a {
    background:#fff;
    border: 1px solid #ccc;
    padding:3px 10px;
    -webkit-border-radius:10px;
    -moz-border-radius:15px;
}

#container .example5 li a:hover {
    background:#5d9ddd;
    border:1px solid #2a7ecd;
    color:#fff;
    -webkit-border-radius:10px;
    -moz-border-radius:15px;
}

[tut demo=”http://www.onextrapixel.com/examples/round-corners-button/” download=”http://www.onextrapixel.com/examples/round-corners-button/round-corners-button.zip”]

Conclusion

Try downloading the demo and explore and if there is any bug, please let me know and I will try my best to fix it.

Comments

  1. / Reply

    Way over my head. Us poor bloggers out here who really know nothing about CSS or even HTML…

    • bab,
    • June 4, 2009
    / Reply

    very nice examples

    • Steve,
    • June 17, 2009
    / Reply

    In Live Demo Example 3 works fine in Safari 4 :)

    • Arnold,
    • August 6, 2009
    / Reply

    why you didnt use a gif format or a png?just curious

      • Terrance,
      • August 6, 2009
      / Reply

      Hi Arnold,

      gif is the same as jpg.

      For png, if you do background repeat, it will not display correctly in IE6 even if you apply ie6-png-fix.

      So if you need to use image for button, try using jpg or gif.

  2. / Reply

    what if we incase like to change the background color on a run, where we got not image editor…..

    • St. Luti,
    • September 9, 2009
    / Reply

    In Example 2, how does the browser know to cut out the extra center space of the background image and leave the two side unedited? The original image is like 100px wide, but the “Home” button is like 30px wide… ugh, thinking about the logistics makes my head hurt.

      • Terrance,
      • September 10, 2009
      / Reply

      Once you apply float left, the whole background image will disappear totally. From there, you can define padding / margin, this will give some spacing to the background image.

      That’s how you can make the background image appear again.

    • imu imu,
    • October 14, 2009
    / Reply

    Kewl design, here’s to tune it up a little in the

    [li a span]

    ‘s part, by adding in the fixed width of “60px” and “text-align” , and it would make the button centers and with a standardized width

    .example2 li a span {
    // some other codes here //

    width: 60px;
    text-align: center;

    }

    I love your buttons, thanks :) am using it too ^_^

    • alex,
    • December 25, 2009
    / Reply

    Here is a video tutorial I made about rounded corners in css.
    http://www.webmastervideoschool.com/blog_item.php?id=16

    Hope it will be useful for you guys.

    Alex

  3. / Reply

    Oh man I googled this thinking I was going to strike out. Thank you so much for the tutorial!

    • Sumana,
    • March 3, 2010
    / Reply

    Thanks for the idea you have provided. Although I did not use your example, the general idea really helped!

    • beaugirl,
    • March 6, 2010
    / Reply

    Thanks! I’m using Example 2, but having trouble getting my button to right align within a table. Any recommendations?

  4. / Reply

    useful tutorial..

    Thanks,

  5. / Reply

    This seems fine for a button that’s really just a link, but what if you want the button to POST? (i.e. a form submit button)?

    • Emil Uzelac,
    • September 6, 2010
    / Reply

    @Scot Hacker

    That’s simple:

    <button type="submit" class="positive">
    Submit Comment
    </button>

    I have very similar css buttons for my WordPress Theme and the above is what I use in comments.php

    Cheers,
    Emil

  6. / Reply

    Very nice tutorials! Thanks

    • Rob Everett,
    • December 28, 2010
    / Reply

    Could anyone tell me how to use this method in wordpress? How do you upload the .gif images to wordpress? (I can’t use css3 because wordpress won’t let me)

    • Tony,
    • February 24, 2011
    / Reply

    This is great, but is there any way to make example 1 or 2 work on any background color? I tried changing the buttons.jpg to a PNG to make the “outside space” transparent. But this allows the underlapped (is that a word?) background to show through making the right side of the button look messed up.

    I have fixed this, by creating a separate buttons.jpg with the desired background color. But that means I will have to do this for each BG color that I have… very inefficient. Was hoping there was a better way :)

    Cheers!

    • Paul,
    • March 22, 2011
    / Reply

    I was able to make Example 5 work with Firefox AND IE!

    • Danny,
    • August 26, 2011
    / Reply

    Isn’t it a lot easier to use the css sprite technique with no issues with any browsers??

    • parvindra,
    • March 19, 2012
    / Reply

    help me. Example 1 is not working in IE.

  7. / Reply

    This for this very useful tutorial.

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals