Affiliate Marketing Tutorial 42 | Clickbank | How To Create A Rollover Button

Affiliate Marketing Tutorial 42 | Clickbank | How To Create A Rollover Button

 

In this lesson we’ll be explaining the steps involved in creating a rollover button and how to add it to a page on your site.

A rollover button provides an eye-pleasing option to your site as an alternative to a standard hyperlink. When a user hovers their mouse over the button image it magically changes – a great party trick to impress all your friends!

There are a variety of methods for doing this but we’re going to show you the cleanest, most browser-friendly option. A small caveat, however: while this method generally works fine on modern computers (from the last five years or so), you may find it a little hit-and-miss on anything older, so be cautious.

There are three aspects to this process:

  1. Creating the image
  2. Adding the HTML to the page
  3. Adding some new styles to the CSS file

Step 1 – Create the image

What you need to do is create a single image that includes your button in its normal state as well as its rollover state; the final image will be exactly twice the height of the button size.

For example, if your button size is 100 pixels wide and 20 pixels high, then the image you are creating will be 100 pixels wide and 40 pixels high.

Step 2 – The HTML

We simply insert a search engine friendly hyperlink in the code, as shown here.

<a id=”clickMe1″ href=”somepage.htm”><span>Click Me</span></a>

It is important we give the link a unique ID, as in this example it is clickMe1. This is particularly important if we are adding more than one rollover button. The second button will be clickMe2 etc. The reason for this will become obvious in the next step.

Step 3 – Adding the CSS

This is where a little bit of CSS magic comes in to play and transforms our ordinary looking hyperlink into a super impressive rollover button.

Add the CSS code shown here to your CSS style file, replacing clickMe1 with the ID you have used as well as updating the image file name. If the image isn’t stored in the same folder as your CSS file then add the full URL.

#clickMe1
{
display: block;
width: 100px;
height: 20px;
background: url(“clickme.gif”) no-repeat 0 0;
}

#clickMe1:hover
{
background-position: 0 -20px;
}

#clickMe1 span
{
display: none;
}

You should also change the “width” and “height” so that it’s the same width and height as your button. Remember that you’ve made your original image twice as high as your actual button, so your “height” number should be half the height of your image.

Lastly, look at the part that refers to background position, as shown here.

background-position: 0 -20px;

Substitute -20 with the number you just used for “height”, with a minus in front of it. So if the total height of your button is actually 60 pixels and not 40 as we’ve used in our example, then change it to what’s shown here.

background-position: 0 -30px;

Save the changes to your CSS file. That’s it – you’re done!

Lesson Summary

In this lesson we looked at how you can easily make a rollover button that works on multiple computers. The three steps were:

  1. Creating the image
  2. Adding the HTML to the page
  3. Adding some new styles to the CSS file

Learn something new? Share it with your friends!

*******

Affiliate Marketing For Beginners Guide- Make $121.71 Per Day With FREE Traffic, Plus FREE Software
https://www.youtube.com/watch?v=frn2jPLsuL8

How To Make Money Online With Facebook – Youtube | Software For Affiliate Marketing | Work From Home Jobs
https://www.youtube.com/watch?v=P_i9PhOwDT0

How To Make Money On Facebook- OCTOSUITE | Facebook Tool Software- Best Way To Make Money From Home
https://www.youtube.com/watch?v=hJuwaJOyjQU

How To Increase Website Traffic- Free Traffic Source Up to 16,364 Targeted Visitors Per Day
https://www.youtube.com/watch?v=dOhN-TLDdhE

Make Money Online With Affiliate Marketing | Clickbank- Just Follow These 3 Simple Steps, I Have Make $200 In 20 Minutes Daily
https://www.youtube.com/watch?v=vEgLaIoHXkM

The Legal Loophole That Can Kill Your Business + How To Solve It In Just 1 Click | WordPress Plugin
https://www.youtube.com/watch?v=–3xY0L-esM

How To Make Money Online With Affiliate Marketing | Clickbank | $1k/day With Free Traffic Keywords
https://www.youtube.com/watch?v=clGYdSX3PnM

Make Money Online Affiliate Marketing- Set Your Instagram and Bring In Traffic, Leads & Sales Today
https://www.youtube.com/watch?v=A6nBeG2ZzyY

Learn How To Make Money With JVZoo | JVZoo Academy | Make Money Online With Affiliate Marketing
https://www.youtube.com/watch?v=x-lRs5gK9vA

Complete ConvertKit Tutorial 2017 | Build Email List Fast | Best Email Marketing Services
https://www.youtube.com/watch?v=zsoykSYL-nc

Affiliate Marketing For Beginners | Clickbank Tutorial | Make $2,293.26 Per Day From My Laptop
https://www.youtube.com/watch?v=tVZSkW1e3qU

Make Money Online Affiliate Marketing For Beginners |Clickbank |$2,228 Weekly By These 4 Simple Step
https://www.youtube.com/watch?v=Pv1Ny1NHZ78

How To Start A Local Facebook Ad Agency | Run Facebook Ads For Local Businesses | Work From Home
https://www.youtube.com/watch?v=X6jUdlkxosM

Make Money Online From Home | FREE DotComSecrets Book | Underground For Growing Your Company Online
https://www.youtube.com/watch?v=oAeaKwWVDIc

Give FREE Book DotCom Secrets | Improve Your Traffic, Conversion n Sales Online | Make Money Online
https://www.youtube.com/watch?v=4aheSNqtMLw

Ship Your FREE Book DotCom Secrets Now | Growing Your Business Online | Make Money Online From Home
https://www.youtube.com/watch?v=-Cdj0XKDVuI

Comments

comments

Leave a Reply

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