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