<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous"> <div class="enquirywrap"> <div class="container"> <div class="row"> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="enquiry-txt"><i class="fas fa-phone"></i> HR ENQUIRY +91-7568543012</div> </div> <div class="col-md-3 col-sm-6 col-xs-4"> <div class="enquiry-txt text-center"><i class="fab fa-skype"></i> dashrath.kumawat </div> </div> <div class="col-md-3 col-sm-6 col-xs-8"> <div class="enquiry-txt text-center"><i class="fas fa-envelope"></i> dkstudioin@gmail.com </div> </div> <div class="col-md-3 col-sm-6 col-xs-12"> <div class="enquiry-btn text-center"> <a href="#" class="btn-3" target="_blank" rel="nofollow" class="hvr-sweep-to-right"> Enquire Now <i class="fas fa-location-arrow"></i><div class="eff-1"></div></a> </div> </div> </div> </div> </div>

.enquirywrap { width: 100%; background: #f1f1f7; } .enquiry-txt { color: #202020; font-size: 16px; padding: 17px 0 0; } .enquiry-btn a { color: #fff; background: #1d1d29; display: block; padding: 15px 0; text-transform: uppercase; font-size: 18px; font-weight: 500; text-decoration:none; transition:all .5s ease; overflow:hidden; position:relative; z-index:2; } .eff-1{ width:100%; height:100%; top:0px; right:-260px; background:#fd5b25; position:absolute; transition:all .5s ease; z-index:-1; } .enquiry-btn:hover .eff-1{ right:0; } .enquiry-btn:hover a{ color:#fff; }