Look, ma! No Javascript!

First of all, I’d like to apologize (again!) for my lack of updates. I know I promised you guys new themes. Believe me, I’m working on them on my spare time. Unfortunately, spare time is a luxury for me these days.

So, to make up for it, allow me to give you a short tutorial on creating mouse-over graphics without using Javascripts. I’ve seen this effect in action through sites featured in CSS galleries. And frankly, I had some difficulty finding a tutorial on them—maybe because I just don’t know which keywords to use. Hehe

If you’ve been reading my personal blog, you’ll notice that I recently did a design make-over. I kept the mouse-over effect, but this time, I used CSS for it—not Javascript.

You’re probably used to seeing simple mouse-over effects like this. It changes color when your mouse is over it. This is a simple effect, and you can even dress it up a bit by putting a background image behind it or something. But what if you wanted to use some fancy font for your link? A fancy font that isn’t available in all computers?

Usually, the solution is Javascript. But not really 🙂 It’s still possible to use CSS.

This is going to be our finished product. As you can see, the links are images. The text has a drop-shadow effect, something that can’t be done using CSS only without bleeding your brains out. This isn’t difficult, promise.

STEP 1: Create the graphics
This is very important, though self-explanatory. Obviously, you need to create the graphics! Take note though, you need to create two graphics for each button: one for the normal state, and the other for the over state:

Normal State
The normal state

Over state
The over state

STEP 2: Setup the button container
You need to determine first whether you want a horizontal or vertical menu. For the purpose of this tutorial, let’s make us of a horizontal one. Here’s what you need to do:

  1. Determine the width and the height of the graphic you created. In our example, the width is 200 pixels while the height is 51 pixels.
  2. Take note if you want the menu to be coming from the right or from the left side. For this tutorial, we’ll pick left.
  3. Setup the CSS! Pick a name for your button container. I’m corny, I’ll chose “button.”

.button {

What this will do is to “stack” your buttons from left to right, hence creating a horizontal menu.

STEP 3: Create the common style for links
As much as possible, I don’t like re-typing styles over and over again. Besides, it’s best to take advantage of the “cascading” feature of CSS—it applies styles on top of others. That’s what we’ll do. For this, we’ll create a common specification for all button links. And since we’re going to be using the .button style as a DIV tag, the following code will tell our CSS, “for all links contained inside the DIV with the .button class, apply these specifications.”

Here’s the code. You add this under the .button code on top on your CSS file:

.button a {

Don’t forget to put “display:block;” It’s very important. Else, your button graphic won’t show.

STEP 4: Specify the graphic backgrounds for each of the links
Since we’ve already specified almost all of the styles we’ll be applying for each of the links, we will only need to change the Normal state graphic, and the Over state graphic. You don’t need to repeat the other styles all over again.

The thing is, you have to create a different link class for each. One for Home, another for About, etc.

Take a look, it goes like this:

a.home {background-image:url(button1.gif);}
a.home:hover {background-image:url(button1-over.gif);}

a.about {background-image:url(button2.gif);}
a.about:hover {background-image:url(button2-over.gif);}

That way, when you apply these classes on a link, it’s going to show the appropriate image background.

STEP 5: Put everything together in HTML
Once you got the CSS done, it’s time for us to write the HTML markup. Here’s how it’s going to look within the “body tag” tag.


As you can see, we made a space into a link. That’s actually the secret behind it all 🙂 Since it’s not going to show any text, the graphic used as the background image of the link will show through.

Take a look at the sample here. If you’re too lazy, I’m giving you permission to just copy the source of that page 😛

Well, hope that helps!

8 Replies to “Look, ma! No Javascript!”

  1. actually, that’s the way i used to do hover images. but since the hover-state image isn’t displayed by default, most browsers won’t preload the image (unless you tell them to with javascript).

    a better solution is to make a two-state image like this

    and then use this CSS for your hover state:
    #header h1 a:hover {
    background-position:-200px 0;

    that way, the image is already loaded by the time you mouse over it, and it’s trivial for the browser to change the background position.

  2. Hello there. I’m sorry if this is the wrong place to post this question, but I can’t seem to click the FAQ or anything else except the home link, at the top (not even the searchbar). Anyway my question about your lovely them, dapit_hapon:
    – I’m editing the dateline in the comments, but it still keeps making the first letter small in the date, like friday, monday, instead of Friday, Monday. I’m just a bit confused, just started fidling with CSS a few days ago, the code looks alright. I’ve seen examples and “l” is used to get the first letter big, but still it doesn’t work.
    – Acutally it’s the same problem for archieves, the month start with a small letter.
    – Final question, under the catagories, let’s say I have a catagory called “Example”, I would like it to say “Example (number of posts)”. So you can see how many posts, currently is in each catagory.

    I hope you can help, I’m almost giving up lol, this is my 4. try at a different theme 😉

  3. I agree with adam. When I checked out kutitos.com and hovered onto the topnav, the background image was missing. One reason, it didn’t preload. The better solution for this is by using sprites. You can check out my tutorial if you like.

  4. I agree with Adam as well. And for complete semantics and SEO, may I suggest you replace the   with the actual link text and hide them using the following CSS code block:

    .button a {
    height: 0;
    overflow: hidden;
    padding-top: 51px;

    This way, those without browser CSS support and search engine crawlers still know where they are going. 🙂

  5. Hi,

    The tread seems okay, adams right plus the fact that you are using CSS, you don’t need to create images, CSS offers a really tricky styles, like changing the background, size of fonts when you hover the link or you can just check out nifty navigation. there’s a lot of sources on the web just a little tweeking and your off and running.

Comments are closed.