You have 03 items in your shopping bag
<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>