Web Design Class: Animated Menu Buttons with CSS3

Hover effects are an effective way to let the visitor know their mouse is positioned over a button. Techniques in the past have included changing the color of the button or using opacity to diminish color.

Recently, I learned from Tutorialize how to use CSS3 to create animated buttons. The tutorial that I learned from has example CSS and HTML files for you to download. I thought this all well and good. And viewing the effect in Chrome is really amazing (and Safari as well, from what I understand). It degrades nicely in Firefox and Internet Explorer. But how practical is this in the real world? I wanted to see how easy it would be to take the provided samples and tweak them into a working menu.

To get started, I used the downloadable files from Tutorialize and then broke it down and updated it per my needs. The first thing I did was link the two new CSS files to my HTML file.

<link rel="stylesheet" type="text/css" href="css/page.css" />

<link rel="stylesheet" type="text/css" href="buttons/buttons.css" />

Then, I added a <div> tag and the <href> tags for the menu.

<div id="buttonContainer">
   <a href="#" class="button small green">Menu Item</a>

   <a href="#" class="button small blue">Menu Item</a>
</div>

I did this first, just to test it and make sure it worked. I noticed immediately that my previous hover effect was now interfering with the buttons. So, I went back to my original CSS file and removed the opacity effect:

A:hover {text-decoration:underline; opacity: .5;}

Now I was faced with the task of organizing these very cool buttons into a working menu. I went back in my HTML file and deleted the button types I didn’t want and kept only the small blue button and a small green button as noted above.

At this point, I was ready to place my new button into the menu position. That was a simple matter of copy and paste. But now I had some spacing issues due to the original files.

First, from the page.css, I removed:

body{

        color:#eee;

        background:url('../img/page_bg.jpg') repeat-x #f3f3f3;

        font:15px Calibri,Arial,sans-serif;

        border-top:5px solid #212121;

}

Then I tweaked the #buttonContainer to fit my size requirements. I kept the box shadow because I felt it provided a nice effect around the menu:

#buttonContainer{

        background:#FFFFFF;

        border:1px solid #F4F4F4;

        margin: 10px auto;

        overflow:hidden;

        

        padding:0px;

        width:990px;

        height: 50px;

        

        -moz-box-shadow:0 0 10px #C4C4C4;

        -webkit-box-shadow:0 0 10px #C4C4C4;

        box-shadow:0 0 10px #C4C4C4;

}

#buttonContainer a{

        float:left;

        margin:1px;

}

If you are comparing my changes to the original sample code, you might have noticed that I changed the background to a defined color instead of using the image. The supplied image is a transparent png that simply allows the background color of your site to come through. On my site, the background color is black, which ruined the rounded edges of the button (a bit of white was coming through). So, I made the background for my menu white.

At this point I was ready to add in more buttons to the menu and for sake of variety I used different colors. Because you are using CSS3 and not images to size the buttons, the amount of text you use per button determines the length of the button. That’s a huge time saver right there.

To adjust the font size in the buttons, I went into the buttons.css and changed the following:

.button.small        { font-size:20px;}

To see this in action, you can visit my personal testing page. I highly recommend that you view it in Chrome and/or Safari first and then Firefox and then Internet Explorer. That way, you can see how the effects slowly degrade from browser to browser.