## Button

- Home
- Shortcodes
- Button

## Button style 1

Buy now
Shop now
Buy now

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

## Button style 2

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