Autism Street

I recently made a new Autism-Hub blogger button that appears in the sidebar here at Autism Street. I wish I could take credit for real CSS skills, but the truth of the matter is that I “borrowed” the animation technique from several other websites.

The good news is that a technique like this is fairly easy to do - there is no javascript or anything like that, all you need is two images (link to zip file containing both provided below) and a little know-how to add the link to the html of your blog and add some styling to the CSS.

 
Here’s how it works:

When the Autism Street page loads, it loads this entire image (”ahbutton.png”) in a single browser request as the background for the button.

Where the Autism-Hub button appears in the sidebar, the actual linked image is a 1×1 pixel transparent .gif file (”transparent.gif”), with a hyperlink to the Autism-Hub. The first part of this little trick is that the link area you can click on for that little 1×1 pixel transparent image is expanded to be the entire size of the hub button. The second part is that what’s seen through that transparent .gif file is a background that is the Autism-Hub button (the double image above) - the position of the background is simply moved for the hover mouse state, and the “width” and “overflow-hidden” constraints only reveal half of the background image. This switches between the low and high color states effortlessly and rapidly.

In the end what we have is a button that looks and works like this.

 
Here are the two images you’ll need (in a single .zip file).

If you’re an Autism-Hub blogger who’d like to give this a try Please host them on your own server or other suitable location, as links back to this site will be disabled, and you’ll be stuck with a non-functioning button.

ahbutton.zip

 
Here’s the sample HTML.

We’re simply creating a separate div class for the button (so it can be placed anywhere on your blog, and have the necessary style applied), calling up the transparent image, and linking it to the Autism-Hub.

<div class=”hub-button”><a title=”Visit the Autism Hub” href=”http://www.autism-hub.co.uk” target=”blank”><img src=”http://yoursite/transparent.gif” border=”none” alt=”Autism Hub” /></a></div>

 
Here’s the sample CSS that goes in your relevant stylesheet.

We’re specifying the size of the div that will contain the button, and pointing to, and positioning the background depending on the hover state.

.hub-button {
width: 120px;
overflow: hidden;
}

.hub-button a {
display: block;
width: 120px;
height: 48px;
background: url(’http://yoursite/ahbutton.png’) no-repeat;
background-position: 0px 0px;
}

.hub-button a:hover {
display: block;
width: 120px;
height: 48px;
background: url(’http://yoursite/ahbutton.png’) no-repeat;
background-position: -120px 0px;
}

 
As might be expected, these images and the sample code are provided “as is”.

By downloading (if you choose to do so), you acknowledge that you are solely responsible for their technical implementation and use.

Questions are welcome in the comments if you have them.