<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-sm-3"> <a href="#" class="btn btn-lg green">button<span class="box"></span></a> </div> </div> </div>

.btn{ padding: 25px 35px; border-radius: 0; text-transform: uppercase; position: relative; transition: all 0.5s ease 0s; } .btn:before{ content: ""; display:block; position: absolute; top:0; left:0; z-index: -1; transition: all 0.5s ease 0s; width: 0; height: 0; } .btn:after{ content: ""; display:block; position: absolute; bottom:0; left:0; z-index: -1; transition: all 0.5s ease 0s; width: 0; height: 0; } .green{ border: 1px solid #00756c; color:#00756c; } .green:hover:before, .green:hover:after, .green:hover .box:before, .green:hover .box:after{ background: #00756c; width: 50%; height:50%; } .box:before{ content: ""; display:block; position: absolute; top:0; right:0; z-index: -1; transition: all 0.5s ease 0s; width: 0; height: 0; } .box:after{ content: ""; display:block; position: absolute; bottom:0; right:0; z-index: -1; transition: all 0.5s ease 0s; width: 0; height: 0; } .btn:hover{ color:#fff; } .green{ border: 1px solid #00756c; color:#00756c; } .green:hover:before, .green:hover:after, .green:hover .box:before, .green:hover .box:after{ background: #00756c; width: 50%; height:50%; }