[Atlantis Tutorial] Fancy Download Button
2013-08-30, 04:38 AM, (This post was last modified: 2014-07-02, 09:00 PM by Atlantis.)
#1
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: [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!

Cheers!
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]
Reply
2013-08-30, 04:47 AM,
#2
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!
Reply
2013-11-12, 05:15 AM,
#3
I need you, could you please private message me?
Reply
2013-11-12, 05:16 AM,
#4
Thank you for this great share
Reply
2013-11-12, 03:50 PM,
#5
I was just looking for something like this. Got just in time.

Thanks.
Reply
2013-11-12, 04:12 PM,
#6
lol,something interesting here :))
Thanks for the share.
Reply
2013-11-12, 06:47 PM,
#7
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]
Reply
2013-11-13, 12:23 AM,
#8
Thank you for this :)
Reply
2013-11-13, 01:31 AM, (This post was last modified: 2013-11-13, 01:31 AM by sureshraina2001.)
#9
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 :(
Reply
2013-11-13, 01:59 AM,
#10
Thanks for the share, appreciated your contribution.
Reply


Possibly Related Threads...
Thread Author Replies Views Last Post
  RIP Unlist Method - Alternative Methods (Tutorial) :) alexparris 56 6,371 2017-12-16, 10:22 PM
Last Post: tamnga
  [Tutorial] Extreme Keyword Research Method (NOOB FRIENDLY) Wopey 67 8,510 2017-12-15, 11:28 PM
Last Post: reshamanair
  (Tutorial) Torrent Method ($100 a day) HoldenCaufield 100 21,221 2017-12-12, 07:22 PM
Last Post: offer494
  [Tutorial] How to make unlimited YouTube accounts if you have static IP Andrei 52 5,272 2017-12-12, 12:46 AM
Last Post: epalyou
  [GET]Fake Mediafire Download (cpagrip) grune 80 20,069 2017-12-10, 02:58 PM
Last Post: cpamallorca





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

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