Making buttons used to require images or software. While you can find freeware to create professional looking buttons, you can also use CSS3 and nothing but code to create your buttons, complete with hover effects, as we’ll show you in this tutorial.
The most common use of buttons on web sites these days are for checkout buttons or download buttons. The example for today’s button will be for a checkout button sans the usual shopping cart icon, which you can always add in on your own later.
Let’s get started. First, start with the CSS3 code for creating rounded corners:
#checkoutbutton {
background-color: #33FF00;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #009900;
padding: 5px;
}
Take a note that you can have one color for the border and another color for the background. Using dual color can help make the button stand out on the screen.
Now, call this in your HTML:
<div id=”checkoutbutton”>
<p><a href=”URL.htm”>Checkout</a></p>
</div>
The first thing that you might notice is that your button now stretches across the entire screen or the entire column, depending on your page layout. That’s not going to be appropriate for your button, so you need to fix the width and the height. Go back to your CSS and add in width and height attributes.
#checkoutbutton {
width: 67px;
height: 40px;
background-color: #33FF00;
moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 5px solid #009900;
padding: 5px;
}
Now you’ve got something that more resembles a button. Most buttons do have some kind of hover effect associated with them to show that it is indeed an active link or will trigger an action. If you already have a hover effect for your links, that will still work. However, the link hover effect will not change the appearance of the CSS3 button. Don’t worry though, you can still add a hover effect to your button as such:
#checkoutbutton:hover {opacity: 0.6; }
If you place the above code into your CSS, then the entire button will slightly fade when the visitor hovers over it. Fair warning though, the user still has to hover directly over the text link for the button to actually work.
Something else to keep in mind is that the rounded corners and the hover effect does not currently work in Internet Explorer but it does work great in Firefox and Chrome.
If you’re wondering about additional text decorations for your link, such as underline and changing the color for links that have already been visited, you can add the following into your CSS as well:
A:link {color: blue; text-decoration:none}
A:visited {color: blue; text-decoration:none}
A:hover {text-decoration:underline; opacity: 0.6; }
So, there you have it: a button with rounded corners and hover effects using simple CSS3 code and no images.
