<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/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<br>
<h1>Toggle like</h1>
<br>
<div class="row">
<div class="col-sm-6">
<div id="box-1" class="button-box">
<div class="inner">
<div class="overlay">
<div id="img-wrapper" class="img-wrapper">
<img src="https://via.placeholder.com/40"/>
</div>
<div class="text-wrapper text-center">
<p>DO SOMETHING</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="box-2" class="button-box">
<div class="inner">
<div class="overlay">
<div id="img-wrapper" class="img-wrapper">
<img src="https://via.placeholder.com/40"/>
</div>
<div class="text-wrapper text-center">
<p>DO SOMETHING</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div id="box-3" class="button-box">
<div class="inner">
<div class="overlay">
<div id="img-wrapper" class="img-wrapper">
<img src="https://via.placeholder.com/40"/>
</div>
<div class="text-wrapper text-center">
<p>DO SOMETHING</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
div[class*="col-"] {
margin-bottom: 15px;
}
.button-box {
cursor: pointer;
border-radius: 2px;
position: relative;
display: block;
background: url(https://via.placeholder.com/350x100/CFCFCF) no-repeat center center;
}
.button-box :hover{
text-decoration: none;
color: #CFC;
}
.button-box .inner {
height: 100px;
}
.button-box .img-wrapper{
width:100%;
height:75%;
display:flex;
justify-content:center;
align-items:center;
}
.button-box .text-wrapper{
width:100%;
display:inline-block;
position: relative;
bottom:10px;
}
.button-box .overlay{
width:50%;
height:100%;
text-align: center;
position: absolute;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
background: rgba(7,124,42,1);
background: -moz-linear-gradient(left, rgba(7,124,42,1) 0%, rgba(7,124,43,1) 25%, rgba(7,124,42,1) 40%, rgba(7,124,42,0.97) 50%, rgba(7,124,42,0.88) 75%, rgba(7,124,43,0.79) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(7,124,42,1)), color-stop(25%, rgba(7,124,43,1)), color-stop(40%, rgba(7,124,42,1)), color-stop(50%, rgba(7,124,42,0.97)), color-stop(75%, rgba(7,124,42,0.88)), color-stop(100%, rgba(7,124,43,0.79)));
background: -webkit-linear-gradient(left, rgba(7,124,42,1) 0%, rgba(7,124,43,1) 25%, rgba(7,124,42,1) 40%, rgba(7,124,42,0.97) 50%, rgba(7,124,42,0.88) 75%, rgba(7,124,43,0.79) 100%);
background: -o-linear-gradient(left, rgba(7,124,42,1) 0%, rgba(7,124,43,1) 25%, rgba(7,124,42,1) 40%, rgba(7,124,42,0.97) 50%, rgba(7,124,42,0.88) 75%, rgba(7,124,43,0.79) 100%);
background: -ms-linear-gradient(left, rgba(7,124,42,1) 0%, rgba(7,124,43,1) 25%, rgba(7,124,42,1) 40%, rgba(7,124,42,0.97) 50%, rgba(7,124,42,0.88) 75%, rgba(7,124,43,0.79) 100%);
background: linear-gradient(to right, rgba(7,124,42,1) 0%, rgba(7,124,43,1) 25%, rgba(7,124,42,1) 40%, rgba(7,124,42,0.97) 50%, rgba(7,124,42,0.88) 75%, rgba(7,124,43,0.79) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#077c2a', endColorstr='#077c2b', GradientType=1 );
}
.button-box .overlay.expanded{
position: absolute;
width:100%;
transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
}
$(document).ready(function()
{
$(".button-box").on("click", function(){
$(this).find(".overlay").toggleClass("expanded");
});
});
