Pure Css Call-to-Action Button

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.