<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"> <div class="middle"> <a href="" class="g_btn cg_btn1">Hover Me</a> </div> </div>

body{ margin: 0; padding: 0; background: #2d3436; } .g_btn{ position: relative; display: inline-block; color: white; font-size: 14px; font-family: "montserrat"; text-decoration: none; margin: 30px 0; border: 2px solid #ff7675; padding: 14px 60px; text-transform: uppercase; overflow: hidden; transition: 1s all ease; z-index:9; background:#888; } .g_btn::before{ background: #ff7675; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1; transition: all 0.4s ease; } .g_btn:hover{ background: #ff7675;} .cg_btn1::before{ width: 0%; height: 100%; } .cg_btn1:hover::before{ width: 100%; }