<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 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> <div class="container"> <a id="checkin" href="javascript:void(0);" class="btn btn-success btn-block m-4 p-0"> <div class="checkin text-left bg-success"> <span class="btn-text pl-4">Checkin</span> </div> </a> </div>

.checkin { -webkit-transition: width 1.3s ease-out, opacity 0.3s ease; -moz-transition: width 1.3s ease-out, opacity 0.3s ease; -ms-transition: width 1.3s ease-out, opacity 0.3s ease; -o-transition: width 1.3s ease-out, opacity 0.3s ease; transition: width 1.3s ease-out, opacity 0.3s ease; width: 0px; height: 100px; top:0; left:0; margin:0; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; /* future proofing */ -khtml-border-radius: 2px; /* for old Konqueror browsers */ } .checked{ width: 100%; top:0; left:0; height: 100px; } .btn-text{ font-size: 4rem; }

$(document).ready(function() { $("#checkin").on("click", function() { $('.checkin').toggleClass('checked'); $(this).attr('disabled', true); }); });