Create An HTML Rollover Button For Your Blogger / BlogSpot Blog

Many bloggers like to place buttons instead of simple links. And in some widgets and posts, buttons do look a lot better than simple hyperlinks. But most of the bloggers think that placing a button is a tedious job, and due to their laziness they finally end up placing a normal link 🙂

But through this post, you will learn that the task of adding an HTML button is as simple as inserting a hyperlink !

First have a look at the button below:

If you want to place a button similar to that, then simply copy and paste this code

<form action=”http://www.google.com” target=”_blank” method=”GET”>
<input type=”submit” value=”Google”>
</form>

Change the code in RED, as per your requirement !
You can delete target=”_blank” from the first line, if you want the new page to open in the same window, and if you want that the new page should open in a new window/tab then leave the target=”_blank” as it is !

The button explained above is a “submit” type button, there are many other types too, like text, radio, check boxes etc.
You can read it in a bit more detail from here: W3Schools.com

As requested by Ankit, here’s an update to this trick, through which you can use a custom button.
But this will need more work from your side, as it does not only depends on the code, but also on the graphics. That means you have to create two buttons, with exactly the same dimensions, one as Button_Up and one as Button_Down (when cursor is on the button).
Here’s the button:

Click Me

I have used these two images:
IMAGE 1:
IMAGE 2:

And the code to be used is this:

<a href=”https://bloggerstop.net”><img src=”IMAGE1″ onmouseover=”this.src=’IMAGE2′” onmouseout=”this.src=’IMAGE1′” alt=”Click Me”/></a>

Although this method is quite slow in loading the second image, but this method is easier for most of the users. Moreover the other methods use CSS coding / JavaScript, due to which for every type of image, you have to add a different code in the blog template, which can slow down your whole blog…

43 thoughts on “Create An HTML Rollover Button For Your Blogger / BlogSpot Blog

  1. Howdy,

    I was wondering if the rollover effect works if I don’t have my own domain name (example:- http://something.blogspot.com. If i add the mouseover code then where do I host the images? The code you have given has image1 and image2. How do I install this code if my images are hosted on photobucket?

    I truly appreciate your help on this matter!

    Thanks in advance,

    Chetan

  2. Hi Chetan,

    Go to gigaimage.com,
    upload any two images from your PC, copy the two DIRECT LINKS to these images,

    Now in place of IMAGE1 and IMAGE2 in the code above, paste the DIRECT LINKS, that’s it, save the widget !

  3. Sir How to get >>Enter Your Email Address<<
                                 >>Subscribe<<
    Button on

  4. Hi! I was curious how to insert a image size into this code? I put it on my site (which, by the way, it the only code I've found on the web that actually works for me!) and it's HUGE! I want to put the image size in there somewhere. Thanks! My email is amandabolton80@yahoo.com.

  5. Hi Amanda,
    put the height and width dimensions inside the img tag, like this:

    <img height="x" width="y" src="IMAGE1"

    where x and y are height and width in pixels.

  6. @Madijkie

    In the input tag, add a style-width attribute, like this:

    <input style="width:200px;" type="submit" value="Google" />

    & use the same value for all the buttons.
    And, it would be better, if you use center tags around each button to keep their alignment centered, like this:

    <div style="text-align: center;">
    <form….


    </form>
    </div>

  7. Hi Diya! this code rocks! it works flawlessly. I have a question:I want to use several of this codes in "one" widget to make a menu.I mean, repeat the whole code just changing the images and source. My problems is this, when I get all the sections of code, one below the other, the images don't rollover. They appear and redirect if I click on them but there is no image rollover. Is there any code I have to put between one piece of code and the other? or maybe this can't be done and only one of this hmtl code can live inside one widget.

  8. @Pepua

    If you want to add a menu to your blog, with rollover effect, then I would better suggest these menus to you. In these widgets, change background colors to background images.
    Menu #1
    Menu #2
    If you want these menus to behave like simple-buttons, then do not use that drop down menu items, and let it all display in a single level.

  9. OMG I'm going to kill someone XD this is the 100th site I been to or more looking how to make buttons for you blogger. I want more of a Navbar like you have on top but I would rather have it in my header under a Html gadget instead of putting it in my html script. I did have one in there but someone messed it up now I have to get another one and its stressing.

  10. Then you should search properly for it, they are not simple html buttons. They are called html-drop-down-menus. Search for "drop down menus" in this blog, and you'll see a hell lot of them.

  11. Hey, great piece of simple code, Im sure everyone looked for a while like i did before they found it and then loved it. I am starting out and am having a little trouble. mine rollover once but then stay ont he second image are you able to help? you can email me at luke@quedesign.com.au.

    Great site thanks heaps

Leave a Reply

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