<div class="row">
<div class="col-md-4 col-sm-6 text-center">
<h4>Standard Buttons</h4>
<a class="btn btn--lg mb--1" href="#"><span class="btn__text"> Large Standard Button </span> </a> <a class="btn mb--1" href="#"> <span class="btn__text"> Medium Standard Button </span> </a> <a class="btn btn--sm" href="#"> <span class="btn__text"> Small Standard Button </span> </a></div>

<div class="col-md-4 col-sm-6 text-center">
<h4>Colored Buttons</h4>
<a class="btn btn--lg btn--primary mb--1" href="#"><span class="btn__text"> Large Primary Button </span> </a> <a class="btn btn--primary mb--1" href="#"> <span class="btn__text"> Medium Primary Button </span> </a> <a class="btn btn--sm btn--primary" href="#"> <span class="btn__text"> Small Primary Button </span> </a></div>

<div class="col-md-4 col-sm-12 text-center">
<h4>Social Buttons</h4>
<a class="btn btn--sm bg--facebook" href="#"><span class="btn__text"> <i class="socicon-facebook"></i> Share on Facebook </span> </a> <a class="btn btn--sm bg--twitter" href="#"> <span class="btn__text"> <i class="socicon-twitter"></i> Share on Twitter </span> </a> <a class="btn btn--sm bg--instagram" href="#"> <span class="btn__text"> <i class="socicon-instagram"></i> Share on Instagram </span> </a> <a class="btn btn--sm bg--googleplus" href="#"> <span class="btn__text"> <i class="socicon-googleplus"></i> Share on GooglePlus </span> </a></div>
</div>
