Weebly Tricks #57 - Animated CSS3 Download Buttons

Codrops is undeniably one of the best source of unique interactive widgets. Today, we will make your download buttons more professional with neater and simpler effects. Each has different styles and hover effects while keeping it readable for viewers. This could even increase the click rate of your download links.

CLICK HERE FOR LIVE DEMO

FILES NEEDED
How to use these files? Click Here!

• downloadbutton.css

---

HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://myweeblytricksdemo.weebly.com/files/theme/downloadbutton.css" type="text/css" />

Note:
Red text - Change with your own site address.

---

BODY CODE
Where to place these codes? Click Here!

Sample 1.

<a href="#" class="a-btn">
    <span class="a-btn-slide-text">$29</span>
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/1.png" alt="Photos" />
    <span class="a-btn-text"><small>Available on the Apple</small> App Store</span>
    <span class="a-btn-icon-right"><span></span></span>
</a>

Sample 2.

<a href="#" class="a-btn1">
    <span class="a-btn1-slide-text">$0</span>
    <img src="http://tympanus.net/Tutorials/AnimatedButtons/images/icons/6.png" alt="Photos" />
    <span class="a-btn1-text"><small>Get it for FREE</small>Download</span>
    <span class="a-btn1-icon-right"><span></span></span>
</a>

Note for both codes:

# - Change it with the link of your button when clicked.

Yellow text - These are your string values, you should edit them.

Green text - The source of the image used in the button, please use your own with size of 64x64.

Blue text - Your image description.

---

CONCLUSION

Next will be animated "Call to Action" buttons. Stay tuned!

Get email updates and more access! (Free)

Email *

email marketing by activecampaign

If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!