Today the Question Is How To Create A Pure HTML Hover Button For Your Blog & Website With Images In Easy Steps To Make It Awesome And Stylish? Many bloggers like to place buttons instead of simple links.And in some widgets and posts, buttons do look a lot better than simple hyper-links.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 ! 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: example...
IMAGE 1:
IMAGE 2:
If you want to place a button similar to that, then simply copy and paste this code and change the RED Text with your desire one.
...
<a href="http://--------.com">
<img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/>
</a>
<img src="IMAGE1" onmouseover="this.src='IMAGE2'" onmouseout="this.src='IMAGE1'" alt="Click Me"/>
</a>
Like.........
<a href="http://www.exeideas.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2a59po4mYym6NG7aI5NEqeouHE0sqVjN4TwoYZ6TPTHx8qT6FBnmhQ94h3kemBd0D_e9vkY7IRnT4fifCSmOw3lPa3LJ4b9RDGbHKZxMXCFcCf2bujR4_p4LhjwGNW6G0nl5ken5SC7Qd/s320/Rss_2.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7itbF_VGt6OLGaF8RSxUGSGsj6E0a7nrlP0910dvV2fM8-4XC1w7_1HW5sE6k0U-QewbNV9wJgHNLZNBA0sFdjDV4pHo63q844rchsL0sZilAwWYOmEibWLMe2L29LsmgmM1vlry42oMy/s320/RSS_1.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2a59po4mYym6NG7aI5NEqeouHE0sqVjN4TwoYZ6TPTHx8qT6FBnmhQ94h3kemBd0D_e9vkY7IRnT4fifCSmOw3lPa3LJ4b9RDGbHKZxMXCFcCf2bujR4_p4LhjwGNW6G0nl5ken5SC7Qd/s320/Rss_2.png'"
alt="Click Me"/>
</a>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2a59po4mYym6NG7aI5NEqeouHE0sqVjN4TwoYZ6TPTHx8qT6FBnmhQ94h3kemBd0D_e9vkY7IRnT4fifCSmOw3lPa3LJ4b9RDGbHKZxMXCFcCf2bujR4_p4LhjwGNW6G0nl5ken5SC7Qd/s320/Rss_2.png"onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7itbF_VGt6OLGaF8RSxUGSGsj6E0a7nrlP0910dvV2fM8-4XC1w7_1HW5sE6k0U-QewbNV9wJgHNLZNBA0sFdjDV4pHo63q844rchsL0sZilAwWYOmEibWLMe2L29LsmgmM1vlry42oMy/s320/RSS_1.png'"onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2a59po4mYym6NG7aI5NEqeouHE0sqVjN4TwoYZ6TPTHx8qT6FBnmhQ94h3kemBd0D_e9vkY7IRnT4fifCSmOw3lPa3LJ4b9RDGbHKZxMXCFcCf2bujR4_p4LhjwGNW6G0nl5ken5SC7Qd/s320/Rss_2.png'"
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...
Superb post however I was wanting too knolw if you could write a
ReplyDeletelitte more on this topic? I'd be very thankful if you could elaborate a little bit more.
Cheers!
my blog post Wayne Erickson