Weebly Tricks #58 - 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.

CLICK HERE FOR LIVE DEMO

FILES NEEDED
How to use these files? Click Here!

• 3actionbutton.css

---

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

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!