Create An HTML Rollover Button For Your Blogger / BlogSpot Blog

Create An HTML Rollover Button For Your Blogger / BlogSpot BlogMany 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: Create An HTML Rollover Button For Your Blogger / BlogSpot Blog
IMAGE 2: Create An HTML Rollover Button For Your Blogger / BlogSpot Blog

And the code to be used is this:

<a href=”http://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…

Leave a Reply

43 Comments on "Create An HTML Rollover Button For Your Blogger / BlogSpot Blog"

Notify of
avatar
Sort by:   newest | oldest | most voted
AB
Guest

Nice Tip !! Must say…Nice Site !!!

View Comment
bollywood girls
Guest

i like your blog ….

View Comment
विनय
Guest

;;) liked it

View Comment
AB
Guest

If I want to place my own designed button ….then?

View Comment
Divya Sai
Guest

Hi Ankit
See the update in the post !

View Comment
AB
Guest

Thanks !!

View Comment
Mottobiz
Guest

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

View Comment
Divya Sai
Guest

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 !

View Comment
Mottobiz
Guest

Thanks for your quick help.

You R AWESOME!!!

View Comment
PULKIT
Guest

thanks
!! following ur page now!:)

View Comment
Sai
Guest

Thanks Pulkit for following, you are always welcome on this blog !

Regards
Sai

View Comment
Shell xx
Guest

Thank you so much! You helped me create a link to my music on iTunes!

: )

View Comment
Divya Sai
Guest

I glad that it was useful to you…thanks for commenting….

Regards
Sai

View Comment
a......
Guest

that's Awesome nice post

View Comment
Mohan
Guest

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

View Comment
Mohan
Guest

My Mail ID: lakshmohan92@gmail.com
Please help me

View Comment
Guest
Guest

Join Feedburner.com and get the embed code for your blog, that's it !

View Comment
mamibizi
Guest

finally the one I'm looking for!!! thankss.. i'm bookmarking this site! keep it up!!

View Comment
Amanda
Guest

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.

View Comment
Divya Sai
Guest

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.

View Comment
wpDiscuz