June 26, 2014

Weebly Tricks #57 - Animated CSS3 Download Buttons

Posted by Domingo Tambasacan at 6/26/2014

Weebly 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.








FILES NEEDED
How to use these files? Click Here!




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

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



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!

...

0 comments:

Have any question? Feel Free To Post Below:

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top