<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 ----------> <p class="sprk_box"> <a class="trsp_bg sprk_btn sprk_btn-white sprk_btn-animate bg-transparent " href="#" role="button">contact us</a> <a class="trsp_bg bg_clr_hvr_sprk sprk_btn sprk_btn-white sprk_btn-animate zbg-transparent " href="#" role="button">contact us bg</a> <a class="sprk_btn sprk_btn-white sprk_btn-animate " href="#" role="button">Request a quote</a> <a class="sprk_btn ovl_circl sprk_btn-white sprk_btn-animate " href="#" role="button">Request a quote</a> <a class=" hvr_trsp_bg sprk_btn sprk_btn-white sprk_btn-animate " href="#" role="button">Request a quote hvr tr</a> </p>

.sprk_box{ position:relative; background: #ccc; padding:25px; overflow:hidden;} .sprk_btn:link, .sprk_btn:visited { text-transform: uppercase; text-decoration: none; padding: 15px 15px; display: inline-block; /* border-radius: 100px;*/ -webkit-transition: all .2s; transition: all .2s; /* position: absolute;*/ } .ovl_circl.sprk_btn:link, .ovl_circl.sprk_btn:visited { border-radius: 100px; } .sprk_btn:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); } .hvr_trsp_bg.sprk_btn:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); background: transparent; } .bg_clr_hvr_sprk.sprk_btn:hover { -webkit-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); background: #fff; } .sprk_btn:active { -webkit-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); } .sprk_btn-white { background-color: #fff; color: #777; border:2px solid #fff; } .trsp_bg.sprk_btn-white { background-color: inherit; color: #09F; border:2px solid #fff; } .sprk_btn::after { content: ""; display: inline-block; height: 100%; width: 100%; /* border-radius: 100px;*/ position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all .4s; transition: all .4s; } .ovl_circl.sprk_btn::after { border-radius: 100px; } .sprk_btn-white::after { background-color: #fff; /* spark color */ } .sprk_btn:hover::after { -webkit-transform: scaleX(1.4) scaleY(1.6); transform: scaleX(1.4) scaleY(1.6); opacity: 0; } .sprk_btn-animated { -webkit-animation: moveInBottom 5s ease-out; animation: moveInBottom 5s ease-out; -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards; } @-webkit-keyframes moveInBottom { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } } @keyframes moveInBottom { 0% { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); } 100% { opacity: 1; -webkit-transform: translateY(0px); transform: translateY(0px); } }