<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 red"> <span class="fa fa-home"></span>button </a> </div> <div class="col-sm-3"> <a href="#" class="btn btn-sm red"> <span class="fa fa-home"></span>button </a> </div> <div class="col-sm-3"> <a href="#" class="btn btn-xs red"> <span class="fa fa-home"></span>button </a> </div> </div> </div>

.btn{ color: #fff; text-transform: uppercase; border-radius: 0; padding-left: 60px; position: relative; transform: translateZ(0px); transition: all 0.5s ease 0s; } .btn:after{ content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #fff; z-index: -1; transform: scaleX(0); transform-origin: 100% 50% 0; transition: all 0.5s ease-out 0s; } .btn:hover:after{ transform: scaleX(1); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .btn span{ width: 40px; height: 100%; line-height: 40px; background: #fff; position: absolute; top: 0; left: 0; transition: all 0.3s linear 0s; } .btn span:after{ content: ""; display: block; width: 10px; height: 10px; background: #fff; margin: auto 0; position: absolute; top: 0; right: -6px; bottom: 0; transform: rotate(45deg); transition: all 0.3s linear 0s; } .btn.btn-sm{ padding-left: 40px; } .btn.btn-sm span{ width: 27px; line-height: 27px; } .btn.btn-sm span:after{ width: 8px; height: 8px; right: -5px; } .btn.btn-xs{ padding-left: 30px; } .btn.btn-xs span{ width: 20px; line-height: 20px; } .btn.btn-xs span:after{ width: 7px; height: 7px; right: -4px; } .btn.red{ border: 1px solid #fe6d6d; background: #fe6d6d; } .btn.red:hover, .btn.red span{ color: #fe6d6d; } .btn.red:hover span, .btn.red:hover span:after{ background: #fe6d6d; } .btn.blue{ border: 1px solid #3bb4e5; background: #3bb4e5; } .btn.blue:hover, .btn.blue span{ color: #3bb4e5; } .btn.blue:hover span, .btn.blue:hover span:after{ background: #3bb4e5; } .btn.orange{ border: 1px solid #ee955b; background: #ee955b; } .btn.orange:hover, .btn.orange span{ color: #ee955b; } .btn.orange:hover span, .btn.orange:hover span:after{ background: #ee955b; } .btn.green{ border: 1px solid #79d799; background: #79d799; } .btn.green:hover, .btn.green span{ color: #79d799; } .btn.green:hover span, .btn.green:hover span:after{ background: #79d799; } .btn:hover span{ color: #fff; } @media only screen and (max-width: 767px){ .btn{ margin-bottom: 20px; } }