[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
  Download ReHub - Multi Vendor Store smmarmy 1 102 2 hours ago
Last Post: baymaxy
  [Download] All Premium Plugins from ait-themes.club smmarmy 2 126 Yesterday, 10:58 PM
Last Post: smmarmy
  [TUTORIAL] How to fake proof for XBOX 360 Games [ANY GAME] Supreme 74 8,338 Yesterday, 08:39 PM
Last Post: Pastorsinot
  [Tutorial] How to make money using Instagram + CPAgrip manjeet036 260 116,728 Yesterday, 12:55 PM
Last Post: hamzayounas
  Find & Download Any Landing Page + How to Implement Your Locker! WealthyHustler 11 617 Yesterday, 03:26 AM
Last Post: cybertrickz




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

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