<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>