<div class="mt-20">    <a data-text="Buy now" class="button-one font-16px" href="#">Buy now</a><br>    </div>    <div class="mt-20">    <a data-text="Shop now" class="button-one style-2 text-uppercase" href="#">Shop now</a><br>    </div>    <div class="mt-20">    <a data-text="Buy now" class="button-one font-16px style-3 text-uppercase" href="#" tabindex="0">Buy now</a><br>    </div>    <div class="mt-20">    <button type="submit" data-text="subscribe" class="submit-button submit-btn-2 button-one">subscribe</button><br>    </div>    <div class="footer-subscribe mt-20">    <button data-text="Subscribe" type="submit" class="button-one submit-btn-4">Subscribe</button><br>    </div>

.button-one {      background: #efefef none repeat scroll 0 0;      display: inline-block;      height: 30px;      line-height: 30px;      overflow: hidden;      padding: 0 15px;      position: relative;    }       .button-one::before {      background: #c8a165 none repeat scroll 0 0;      bottom: 0;      color: #fff;      content: attr(data-text);      left: -100%;      position: absolute;      text-align: center;      top: 0;      width: 100%;      visibility: hidden;      z-index: 11;    }    .button-one::after {      border: 2px solid #d3d3d3;      bottom: 0;      content: "";      left: 0;      position: absolute;      top: 0;      width: 100%;      z-index: 1;    }    .button-one:hover, .button-one:focus, .button-one:active {      color: #fff;    }       .button-one:hover::before, .button-one:focus::before, .button-one:active::before {      left: 0;      visibility: visible;    }       .submit-button.btn-bg-2 {      background: #C8A165 none repeat scroll 0 0;    }    .submit-button.btn-bg-2::before {      background: #c87065 none repeat scroll 0 0;    }    /* Slider */    .button-one.style-2 {      height: 45px;      line-height: 45px;      padding: 0 30px;    }    .button-one.style-3 {      background: #c87065 none repeat scroll 0 0;      color: #fff;      font-weight: 700;      padding: 0 30px;    }    .button-one.style-3::after {        border: 2px solid #c87065;    }    .button-2 {      font-weight: 700;    }    .submit-btn-4::after {      border: medium none;    }

    <div class="mt-20">    <button class="btn btn-default" type="button">Default</button><br>    </div>    <div class="mt-20">    <button class="btn btn-success" type="button">Success</button><br>    </div>    <div class="mt-20">    <button class="btn btn-info" type="button">Info</button><br>    </div>    <div class="mt-20">    <button class="btn btn-warning" type="button">Warning</button><br>    </div>    <div class="mt-20">    <button class="btn btn-danger" type="button">Danger</button><br>    </div>