<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 ----------> <div class="container"> <h2>Css button hover effects</h2> <br/> <p> <a href="#" class="btn-icon"> <span><!--<img src="images/chat.png" alt="Talk to a Consultant" class="lazy">-->Contact Now</span> </a> </p> </div>

.btn-icon span { z-index: 99; position: relative } .btn-icon i, .btn-icon img { display: inline-block; vertical-align: middle; margin-right: 10px; -webkit-transition: .4s ease all; transition: .4s ease all } .btn-icon { background: #333; padding: 13px 25px; color: #ffff; font-size: 18px; font-weight: 300; position: relative; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); -webkit-box-shadow: 0 0 1px transparent; box-shadow: 0 0 1px transparent; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: .5s; transition-duration: .5s } .btn-icon:before { content: ""; position: absolute; z-index: 0; top: 0; left: 0; right: 0; bottom: 0; background: #1c64f0; -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: .5s; transition-duration: .5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out } .btn-icon:active, .btn-icon:focus, .btn-icon:hover { color: #fff } .btn-icon:active:before, .btn-icon:focus:before, .btn-icon:hover:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(.52, 1.64, .37, .66); transition-timing-function: cubic-bezier(.52, 1.64, .37, .66) }