TUTORIAL: HOVER BUTTONS


You've seen those blinking buttons on my site that light up when you hover over them, yes? And you want to make your own? Well, fine then, go ahead and do it... oh, you don't know how. Hmm... Well then, I guess I'll have to teach you. If you already know a bit about CSS (Cascading Style Sheets), then this should be fairly simple to child's play for you. If you don't, don't worry; I'll explain everything in detail.

To begin, we're going to make an image much like a sprite sheet with one frame on top and the other beneath. My site uses an image that looks like this:

Icon Background

Before we can use this, you need to understand how to make a hover link. In your styles.css file, you should have something like this:

a {
	color: #0000FF;
}

a:hover {
	color: #FF0000;
}


This is a basic link code in CSS. First you'll notice a which means the definition is for an anchor in its neutral state. You can also use a:link for browsers that may not know to revert to this default state (uncommon, but better safe than sorry). The color code is set with a hexadecimal hashtag-like value. Underneath is the same thing, but this time with :hover. This tells the browser that this is the formatting the link should use when in it's hover state, when the mouse hovers over it.

We'll be using this same basic template for our image links. Remember the image I showed you? That'll be the background you'll be using. If you don't want a background and just want the image itself to be the button, then you'll just have to use a fully transparent image, and you'll see why here. What you're going to do is add in your blank image as you normally would, only this time, you're going to add a class to it that lets formatting and interactive codes like CSS and JavaScript identify it more easily.

<a href="somewhere.com"><img class="hovicon" src="blank.png" /></a>


Looking at the result of this code, we just see empty space. Our icon will not show up until we set up our CSS. Here's the new code we'll be using for this:

img.hovicon {
	width: 100px;
	height: 100px;
	background: url("hovicon.png");
	background-position: 0 0;
}

img.hovicon:hover {
	width: 100px;
	height: 100px;
	background: url("hovicon.png");
	background-position: 0 -100px;
}


In CSS, classes are identified by prefixing them with a period. In this case, we use img.hovicon to tell CSS that only images with that class are to be targeted, but putting a class name with nothing before it tells CSS that any element with that class is a valid target.

We set the width and height to the size of the blank image, not the size of the background image. It should be the same width and half the height of the background. The background image is set using url() to get the filename of the image and set its position to zero-zero, which is where it would normally start anyway, but as I said above, it's better to make sure explicitly. In the background-position field, we define x and y coordinates, separated by a space.

In the hover state, the y value for the image is set to negative half its height. Why negative? Because in most programming languages, a higher y value means further from the top, so a value of 100 would appear lower than 50. By moving it up, we can change its appearance without changing the actual image, meaning nothing new needs to load in the browser. This same effect can be accomplished with animated GIFs, but remember that even if the neutral state is not animated, you'll still have to load multiple frames for it because those same frames show the hover animation. They would also have to be the same length if both were animated, and use the same timing.

On my site, I have images with transparent backgrounds in place of blank.png to make each one look different. This allows me to recycle the light-up parts and use just over half the file size as I would making a new background for every icon. I also use the class "sprite" instead of the sample class "hovicon" because I based my gallery design off the Spriter's Resource. Recycling the background like this also helps if you want to animate it since it only needs to load one animation for every instance.



And that's all there really is to it! I hope you found this tutorial helpful, and if so, please share it and leave a comment below with your feedback, as well as anything else you'd like to see me do a tutorial on.