Style 1

                
    <div class="section-title">
        <h2 class="mb-5">Style 1</h2>
    </div>
    <div class="row justify-content-center mb-7">
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-primary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-primary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-primary" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-secondary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-secondary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-secondary" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-black mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-black mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-black" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
    </div>
                
                
                

Style 2

                
    <div class="section-title">
        <h2 class="mb-5">Style 2</h2>
    </div>
    <div class="row justify-content-center mb-7">
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-primary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-primary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-primary" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-secondary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-secondary mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-secondary" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-black mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-black mb-4" href="#" title="Buttons" tabindex="-1">Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-black" href="#" title="Buttons" tabindex="-1">Buttons</a>
        </div>
    </div>
                
                
                

Style 3

                
    <div class="section-title">
        <h2 class="mb-5">Style 3</h2>
    </div>
    <div class="row justify-content-center mb-7">
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-primary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-primary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-primary" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-secondary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-secondary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-secondary" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-black mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-black mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-black" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
    </div>
                
                
                

Style 4

                
    <div class="section-title">
        <h2 class="mb-5">Style 4</h2>
    </div>
    <div class="row justify-content-center mb-5">
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-primary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-primary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-primary" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-secondary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-secondary mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-secondary" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
        <div class="col-lg-3 col-md-4 mb-5 mb-md-0">    
            <a class="btn btn-sm btn-outline-black mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-md btn-outline-black mb-4" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
            <div class="clearfix"></div>
            <a class="btn btn-lg btn-outline-black" href="#" title="Buttons" tabindex="-1"><i class="fa fa-thumbs-up mr-1" aria-hidden="true">&nbsp;</i> Buttons</a>
        </div>
    </div>
                
                
                
HEADER STYLE
COLOR SCHEMES
Buy Now