<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 class="text-center mt-5">Transition Buttons</h2> <div class="row"> <div class="col-md-6 offset-md-3 text-center"> <div class="buttons_cont mt-5"> <button class="btn left-background">left hover</button> <button class="btn right-background">Right hover</button> <button class="btn bottom-background">Bottom hover</button> <button class="btn top-background">Top hover</button> </div> </div> </div> </div>

.buttons_cont{ box-shadow: 1px 2px 2px 2px #efefef; padding:3em; } .left-background{ background: linear-gradient(to left, aquamarine 50%, white 50%); background-size: 200% 100%; background-position:left ; margin-left:10px; transition:all 0.2s ease; border:1px solid aquamarine ; border-radius:18px; padding-left: 2em; padding-right: 2em; margin-bottom: 2em; } .left-background:hover,.left-background:focus{ background-position: right; border-color: aquamarine !important; } .right-background{ background: linear-gradient(to right, aquamarine 50%, white 50%); background-size: 200% 100%; background-position:right; margin-left:10px; transition:all 0.2s ease; border:1px solid aquamarine ; border-radius:18px; padding-left: 2em; padding-right: 2em; margin-bottom: 2em; } .right-background:hover{ background-position: left; } .bottom-background{ background: linear-gradient(to bottom, aquamarine 50%, white 50%); background-size: 100% 200%; background-position:bottom; margin-left:10px; transition:all 0.2s ease; border:1px solid aquamarine ; border-radius:18px; padding-left: 2em; padding-right: 2em; margin-bottom: 2em; } .bottom-background:hover{ background-position: top; } .top-background{ background: linear-gradient(to top, aquamarine 50%, white 50%); background-size: 100% 200%; background-position:top; margin-left:10px; transition:all 0.2s ease; border:1px solid aquamarine ; border-radius:18px; padding-left: 2em; padding-right: 2em; margin-bottom: 2em; } .top-background:hover{ background-position: bottom; }