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="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...

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

43 comments

Write comments
AB
January 07, 2009 4:41 PM delete

Nice Tip !! Must say...Nice Site !!!

Reply
avatar
AB
January 14, 2009 3:18 AM delete

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

Reply
avatar
January 14, 2009 11:32 AM delete

Hi Ankit
See the update in the post !

Reply
avatar
March 16, 2009 2:45 PM delete

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

Reply
avatar
March 16, 2009 3:22 PM delete

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 !

Reply
avatar
March 17, 2009 12:40 PM delete

Thanks for your quick help.

You R AWESOME!!!

Reply
avatar
April 09, 2009 6:01 AM delete

thanks
!! following ur page now!:)

Reply
avatar
Sai
April 09, 2009 12:00 PM delete

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

Regards
Sai

Reply
avatar
May 06, 2009 2:59 AM delete

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

: )

Reply
avatar
May 06, 2009 12:05 PM delete

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

Regards
Sai

Reply
avatar
July 30, 2009 9:28 PM delete

that's Awesome nice post

Reply
avatar
Mohan
August 21, 2009 11:36 AM delete

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

Reply
avatar
Mohan
August 21, 2009 11:37 AM delete

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

Reply
avatar
Guest
August 21, 2009 12:01 PM delete

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

Reply
avatar
October 04, 2009 8:01 PM delete

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

Reply
avatar
October 06, 2009 3:35 PM delete

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.

Reply
avatar
October 06, 2009 4:17 PM delete

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.

Reply
avatar
October 06, 2009 4:20 PM delete

I mean the two image code...thanks!

Reply
avatar
October 06, 2009 4:21 PM delete

oooh! thanks! I will try it now!

Reply
avatar
October 06, 2009 10:15 PM delete

thank you so very much! It worked perfectly!

Reply
avatar
November 08, 2009 5:01 PM delete

ok so total beginner ... got this to work, but how do i keep the buttons on one line and not above each other?

Reply
avatar
February 03, 2010 11:51 AM delete

this kind of helps, but not exactly what i was looking for. thanks though!

Reply
avatar
February 03, 2010 12:02 PM delete

So what exactly is Kenzy looking for? :-/

Reply
avatar
February 07, 2010 7:50 AM delete

First of all: thanx for al the advise. I'm trying to create a website and want to use the button. I'd like to create a button list.
However the buttons don't have a fixed with. As you can see here: www.rokenengezondheid.nl/p/gevolg.html

Is there a way to make al the buttons the same size, no matter de text they contain?

Reply
avatar
February 07, 2010 8:52 AM delete

@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>

Reply
avatar
February 08, 2010 3:35 PM delete

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.

Reply
avatar
February 09, 2010 10:16 AM delete

@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.

Reply
avatar
Anonymous
March 27, 2010 4:49 AM delete

Nice tutorial

can you tell me how to make two buttons inline inside table.

Reply
avatar
April 02, 2010 7:50 PM delete

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.

Reply
avatar
April 03, 2010 10:31 AM delete

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.

Reply
avatar
Anonymous
May 24, 2010 6:13 PM delete

Divya Sai is The BEST.

Reply
avatar
May 25, 2010 4:23 AM delete

Thank you buddy :)
but why anonymous?

Reply
avatar
September 22, 2010 8:48 PM delete

this rollover combined with the preload trick I learned at this guy's blog (not affiliated with me otherthan I used it) makes your rollover a knockout.

http://www.createblog.com/html_css-scripts/2417-preload-with-only-htmlcss/

Reply
avatar
September 30, 2010 10:16 PM delete

how do I add a blogger button to my website?? so you can click on it and it will take you to my blog. Could you help me?

Reply
avatar
October 01, 2010 12:21 AM delete

You want to place a button on your blog, that will take visitors to your own blog?

Reply
avatar
January 12, 2011 10:55 PM delete

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

Reply
avatar
May 25, 2011 1:41 PM delete

Could I add 'mouseclick' image too ?

Reply
avatar
October 01, 2011 7:09 AM delete

Hello divya nice tutorial im looking for this since last week.
It works for me but i need to put it on my blog template intact, i I mean adding that code without putting it on my
HTML/JavaScript widget.

Help plz! this my blog http://pctionary.blogspot.com/

Reply
avatar
Anonymous
July 21, 2012 4:54 PM delete

thank you for the code! Its the only thing that works, seriously!

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon