How to: Make an Animated HTML button

Ok I’ve been promising this one for a while, so thanks for being patient.
I must preface this with saying, I’m no computer geek or code writing expert, this is just knowledge I’ve gathered by researching on the web. If you have any questions I probably can’t answer them so don’t even bother asking – Just google it.

I’ve recently made some ad buttons for various lovely blogs, here is one of my favourites.

The beauty of having a HTML coded image or animation is that clicking on it will take you through to the website you choose, in this case my shop.

So here is the code you need

http://your web address here" target="_blank"><img
src="http://your image url here" />

Your web address is the website you want the button to click through to, like your shop or blog

Your image url is the url(web) address of your hosted image or animation. You can either host it on your own website (blogger doesn’t allow this but I think WordPress is able to), on photobucket or when you create a gif file via picason, they are hosting for you when you copy the url address.

Your image must be your final desired size when you grab the url, this code does not allow for resizing later. Most side bars on blogs are 150-200px wide so don’t make your image wider than this.(Mine was bigger to fit a specific ad spot)

The button will default to the left, so is ideal to use in a sidebar.

If you want to share your button like this

You can get the code and instructions from Shabby Blogs, there are other great tutorials and buttons you can grab too.

To make your animated image, my tutorial is here. Remember to choose the size of your animation as this will be your finished button size.

Now have a go. I hope my instructions were clear. Ok I’ll let you ask questions but i can’t guarantee I’ll know the answer.

No linky today, but I’d love you to leave a comment if you use my tutorial, leave your web address so I can see your finished product.


  • CurlyPops says:

    Yah! It works.
    I just need to play around with the sizing.

  • Vic says:

    Awesome Cinti, thank you!

  • I never thought it was possible for me to make an animated HTML button until now. And I did it with your help! Thank you a million times over for your awesome tutorial!!

  • jet says:

    thank you for the tute, i have on my gone website those animated buttons as well.
    but i must refind a tool of my G5 mac for i can restart the website-S
    I ‘m using now my too old main programme on my old imac, it’s a good one but i’m missing my other work , being a cartonist and making comics.
    I hope some day there is hope and i’ll find the damn tool. And then i can remodle some of the designs with this help of yours;-D

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.