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

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;
}

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.