<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 bg-secondary"> <div class="row"> <button class="btn-4"><span>Hover Me</span></button> </div> </div>

button{ display: inline-block; position: relative; background: none; border: none; color: #fff; font-size: 18px; cursor: pointer; margin: 20px 30px; background: rgba(0,0,0,0.09); } span{ display: block; padding: 25px 80px; } button::before, button::after{ content:""; width: 0; height: 2px; position: absolute; transition: all 0.2s linear; background: #fff; } span::before, span::after{ content:""; width:2px; height:0; position: absolute; transition: all 0.2s linear; background: #fff; } button:hover::before, button:hover::after{ width: 100%; } button:hover span::before, button:hover span::after{ height: 100%; } /*----- button 4 -----*/ .btn-4::after{ right:0; bottom: 0; transition-duration: 0.4s; } .btn-4 span::after{ right:0; bottom: 0; transition-duration: 0.4s; } .btn-4::before{ left: 0; top: 0; transition-duration: 0.4s; } .btn-4 span::before{ left: 0; top: 0; transition-duration: 0.4s; }