[Atlantis Tutorial] Fancy Download Button
2013-08-30, 04:38 AM, (This post was last modified: 2014-07-02, 09:00 PM by Atlantis.)

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: [Image: b1ukt3S.png]
  • Image 2: [Image: TI03Woi.png]

Step 2. The 'Magic' code
Now use this piece of html:
PHP Code:
<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!

Latest Thanks - View all

vasaki(2016-06-09 04:42 AM) CheersFile(2016-04-24 06:17 PM) honeydew(2016-04-08 02:45 AM) unbeL(2015-06-21 10:38 AM) sureshraina2001(2013-11-13 01:28 AM) NHN(2013-11-12 04:44 PM) boghi(2013-11-12 04:12 PM) contentcouch(2013-11-12 03:50 PM) 

[Image: wI9cuAG.png]
Share This Thread :

2013-08-30, 04:47 AM,
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.

Before End of Year Goal ! Car *MYVI*
[Image: jhnSWo7.png]
Skype - E60Boy (Note: Not online as much as before!)
[ ] 150+ Rep
[ X ] 800+ Posts
User's Voice/Video Service!
2013-11-12, 05:15 AM,
I need you, could you please private message me?
2013-11-12, 05:16 AM,
Thank you for this great share
2013-11-12, 03:50 PM,
I was just looking for something like this. Got just in time.

2013-11-12, 04:12 PM,
lol,something interesting here :))
Thanks for the share.
2013-11-12, 06:47 PM,
Nice tutorial. cos i thought you need css to shift a single image with both buttons in it; i found this one easier! Thanx

Join The Best Network Today And Earn REAL Money! The secret to success lies here.

[Image: jqE21u3.gif]
2013-11-13, 12:23 AM,
Thank you for this :)
2013-11-13, 01:31 AM, (This post was last modified: 2013-11-13, 01:31 AM by sureshraina2001.)
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 :(
2013-11-13, 01:59 AM,
Thanks for the share, appreciated your contribution.

Related Threads
Thread Author Replies Views Last Post
  [Tutorial] Superb WhiteHat Niche + How To Promote It Superhero99 69 16,847 2018-03-20, 09:37 PM
Last Post: imonambot
  [TUTORIAL] How to Use CPAlander on Blogspot Liverpool F.C 50 10,238 2018-03-20, 03:06 PM
Last Post: ropebin
  Download Udemy Courses FREE (2018) atebon 27 1,446 2018-03-20, 11:51 AM
Last Post: atebon
  [Tutorial] Make $50/A Day Wih Facebook and CPA With Zero To Little Investments CPA_Mastermind 82 20,017 2018-03-19, 03:33 PM
Last Post: chumban
  [Video] Keep Facebook Adverts And YouTube Videos Alive (Tutorial) HawkEye 12 5,465 2018-03-16, 05:35 AM
Last Post: unex

About Us | Contact Us | CPA Elites | Advertise | Stats | Staff Team

© 2013-2018 CPA Elites Ltd
Enhanced by MyBB and WallBB
Return to top