Adding css animation in Call-To-Action button in html.
<!-- Call To Action --> <div class="call-to-action-container"> <div class="container"> <div class="row"> <div class="col-sm-12 call-to-action-text wow fadeInLeftBig animated" style="visibility: visible; animation-name: fadeInLeftBig;"> <p> Today Offer <span class="violet">Avail 50% off</span> </p> <div class="call-to-action-button"> <a class="big-link-3" href="#">Get It Now!</a> </div> </div> </div> </div> </div> </div> <!-- Call To Action -->
CSS Styles : Add animate.css style to head section in html.
<link href="animate.min.css" rel="stylesheet">
.call-to-action-container { margin-top: 20px; padding-bottom: 50px; } .call-to-action-text { padding-top: 25px; padding-bottom: 15px; background: #f8f8f8; text-align: left; overflow: hidden; } .call-to-action-text p { float: left; width: 80%; padding-left: 25px; line-height: 30px; font-size: 18px; font-style: italic; } .call-to-action-text .call-to-action-button { float: left; width: 20%; padding-right: 25px; margin-bottom: 10px; text-align: right; } a.big-link-3 { display: inline-block; padding: 5px 22px; background: #9d426b; font-size: 18px; color: #fff; font-style: italic; line-height: 24px; text-decoration: none; -moz-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; -webkit-box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; box-shadow: 0 1px 25px 0 rgba(0,0,0,.05) inset, 0 -1px 25px 0 rgba(0,0,0,.05) inset; }
There you have it, a simple call to action button with css styling. A call to action button or CTA is required for website as this motivates your readers to get engage and it is a call to your service.