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.
