June 30, 2014

Weebly Tricks #58 - Animated Call to Action Buttons

Posted by Domingo Tambasacan at 6/30/2014

Weebly Animated Call to Action Buttons


Get your audience attention using this animated Call to Action buttons made with pure CSS3. Call to action button is more powerful than the traditional "click here" word or text link. That is because mostly, our visual attention starts first before we read the content. Choose from the three designs on the demo page and apply to your site. This tutorial is very easy to follow.








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/3actionbutton.css" type="text/css" />

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



BODY CODE
Where to place these codes? Click Here!

Sample 1.
<div class="button3-wrapper">
<a href="#" class="a-btn3">
    <span class="a-btn3-text">Register Now</span>
    <span class="a-btn3-slide-text">It's FREE!</span>
    <span class="a-btn3-icon-right"><span></span></span>
</a>
</div>

Sample 2.
<div class="button4-wrapper">
<a href="#" class="a-btn4">
    <span class="a-btn4-text">Register now</span>
    <span class="a-btn4-slide-text">Get a promotion</span>
    <span class="a-btn4-icon-right"><span></span></span>
</a>
</div>

Sample 3.
<a href="#" class="a-btn5">
    <span></span>
    <span>Click Here!!</span>
    <span>MWT #23</span>
</a>

Notes from the 3 codes above:
Yellow text - Change with your preferred text string.



CONCLUSION

Comment back if you love these buttons. More on my next tutorial, always be notified by registering on my Email list located at my sidebar!

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