Create eye-catching call-to-action buttons with simple mouse over effects that will help convert traffic and capture more leads!

One of the things that you can easily do to create a little more ‘action’ on your websites or squeeze pages is create a simple mouse over script that will either change the image, change the color or do something different when people put their mouse over that button or image.

With WordPress, even if you are not experienced with CSS (Cascading Style Sheets, is a kind of code that tells the browser how to render a web page),  here are two simple ways to:

  1. Add a mouse over highlight with a CSS script.
  2. Add a mouse over highlight without a CSS script.

Either way, this will add some action to any call-to-action image on your WordPress Website!

Place Your Mouse Over the Two Images
(clicking will take you to the tutorial)
Method #1 Method #2
More Info

Admit it, it’s kinda fun to keep running your mouse across them. Well, your website visitors will feel the same way. I am sure you can be more creative than what I have done here and the possibilites are almost endless. By creating these cool effects, it will also help trigger more clicks.

Though you may find Method #2 is much simpler because there is no editing to your CSS Stylesheet, don’t let this deter you, Method #1 is not that difficult and once you do it you will feel very accomplished.

Method #1

Before You Start:

 JetPack css plugin

There are a few different ways to edit your WordPress CSS stylesheet. If you are not familiar with any of them or unsure where to start, or maybe I lost you at CSS… don’t worry about it. Keep it as basic as possible and easy to understand by installing the JetPack Plugin for WordPress before you begin this tutorial.

Though there are many features in the JetPack plugin you may never use, there are a couple that you will find very useful, one being the ‘Custom CSS‘ editor.

Method #1 – Part A

The following code is the css script that you will copy & paste to your Custom CSS Editor once you have it installed using JetPack. This will show a hover effect on and/or around an image. (Below the script you will see what to edit.)

If you are wanting to do this for multiple image sizes, you would have to create one for each image. This type of script is most effectively used for specific “call to action” images that are commonly used on your website. ie – ‘Buy Now’, ‘Apply Now’, ‘Enter Now’, etc.

/* =Custom CSS
———————————————– */
/*Mouse-over highlight START */

.box {
width: 200px;
height: 38px;
border: 2px solid #550B00;
padding: 0;
}

.box:hover
{
-moz-box-shadow: 0 0 20px #550B00;
-webkit-box-shadow: 0 0 20px #550B00;
box-shadow: 0 0 20px #550B00;
}
/*Mouse-over highlight END */

Understanding & Editing the code above:

  • Anything between the /*symbols*/ is nothing more than a reminder to you of what the code is, where it begins and where it ends. This is helpful when you are using several different custom CSS styles.
  • Above you will notice two references to ‘.box‘. box is the ‘class’ name that refers to this script and you will be referring to it later. The classname ‘box’ can be named anything you like to make it easier to remember. I use class names that name the call to action. For example, on this page, the classname for Sample #1 image is boxsample. Whatever you name it, make it all one word, no spaces or dashes, text only.
  • width: 200px; height: 38px; – This is the exact width and the height of the image you are using. Adjust it for your image size.
  • border: 2px solid #550B00; – This is the border width & border color of the image. Edit this to match your button/website colors.
  • Anything in the .box:hover section has to do with when the mouse is placed over the image. (Remember: If you change the class name, you would need to change it here too. ie .yourclassname:hover) You can change the color and the shadow width. Play with it and you will see all the different effects. (If you mess it up, just paste the original back in and start again.)

Once you have pasted that script or your edited version and saved it to your Custom CSS from your WordPress admin, then you can move on to the next step, installing your new button on your website.

Method #1 – Part B

The hard part is over. Remember in Part A, we talked about ‘Class’ names. Well, this is where we will use them.

On your page/post where you have that image, all you would need to do is go to the ‘Text Editor’ (html editor) of your WordPress post and then add <div class="CLASSNAME"> in front of the image, and then close it with </div> after the image. The html for the image I have on this page is similar to this;

<div class="boxsample"><a href="yourlink"><img src=yourimagelink" alt="" width="200" height="38" /></a></div>

Method #2

Before You Start:

This is pretty darned simple, requires nothing more than creating and using two images of the same height and width. When someone places their mouse over the image. it changes the image.

Here is the simple code that you will add referring to 2 different images. (You could technically use 3 images. The 1st for before image, the 2nd for mouse over image and the 3rd for mouse out image.)

Simply replace the ‘image1.jpg’ and ‘image2.jpg’ with your image links.

<img src='image1.jpg' width='200' height='38' onmouseover="this.src='image2.jg';" onmouseout="this.src='image1.jpg';" />

And there you are! Two different, simple mouse over scripts to highlight any image and/or change the image when anyone places their mouse over it.

Resources:

Need some help with creating images & buttons? I use PhotoImpact 3. It is comparable to Photoshop, but at a fraction of the price. At only $29.95, you will find it very easy to use and provide you with endless uses for editing or creating any type of image.

Need entertaining fonts and explosive graphics? Here is one of the largest collection of graphics and cool fonts, grab them from Graphics Empire.


Pin It on Pinterest

Shares