[Atlantis Tutorial] Fancy Download Button

Welcome to CPAElites - the original incentive CPA affiliate marketing forum online, solely based on "Cost Per Action".

Be a part of something great, join today! Learn CPA marketing with CPAElites, we will teach you everything such as the best CPA networks, CPA offers with highest payouts and best conversion rates, unsaturated CPA niches, most effective traffic sources and more.

Atlantis

Well-known member
VIP Legends CPAElites Classic (1.0)
VIP Elites CPAElites Classic (1.0)
Joined
August 27, 2013
Messages
390
Reaction score
0
Hello!

I also posted this in the GFX section but not everyone looks there so I will also post this tutorial here.

Since not everyone knows how to do such a thing with HTML and CSS, I will teach you guys a little trick to make your download button more appealing.

There is a little HTML involved but that should't be a big problem.

Step 1. the button(s)
Create a download button, preferably a .PNG and create a second image with a slightly different color tint or a slightly moved arrow. (See example)
  • Image 1:
    b1ukt3S.png
  • Image 2:
    TI03Woi.png

Step 2. The 'Magic' code
Now use this piece of html:
PHP:
<img src="IMAGE1LINK.png" onmouseover="this.src='IMAGE2LINKi.png';" onmouseout="this.src='IMAGE1LINK.png';" />
What this code will do: As soon as a visitor hovers the mouse over the download button, the Image 1 will change to the Image 2. You can create some nice effects with this. In this example I chose for a inner shadow.

Click here to see a live example.

Now get creative and make yourself some nice buttons!

Cheers!
 

User

Well-known member
VIP Legends CPAElites Classic (1.0)
VIP Elites CPAElites Classic (1.0)
Joined
May 9, 2013
Messages
1,055
Reaction score
0
Location
Caribbean ! :D
That's kinda a double post but this seems to be better here. Thanks for the tutorial! I will use it when I move to websites.
 

Superhero99

Well-known member
VIP Legends CPAElites Classic (1.0)
VIP Elites CPAElites Classic (1.0)
Joined
October 31, 2013
Messages
1,893
Reaction score
5
Location
CPA Elites
Website
cpaelites.com
Nice tutorial. cos i thought you need css to shift a single image with both buttons in it; i found this one easier! Thanx
 

sureshraina2001

Well-known member
Joined
May 9, 2013
Messages
269
Reaction score
0
LOVE YOU BRO ( sorry this is what came out of my mind when I see this thread . I am really happy to find this method here ) , this is what I was searching for past many days . My searching keyword was wrong I must say :(
 
Top Bottom