<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h4 class="uppercase font-weight-7">Button with stroke</h4>
        <a class="btn btn-tiny border light uppercase" href="#">tiny Button</a>
        <a class="btn btn-small border light uppercase" href="#">small Button</a>
        <a class="btn btn-medium border light uppercase" href="#">Medium Button</a>
        <a class="btn btn-large border light uppercase" href="#">large Button</a>
        <a class="btn btn-medium border light xround-1 uppercase" href="#">Button Rounded</a>
        <a class="btn btn-medium border light xround-7 uppercase" href="#">Button Full Rounded</a>
        <a class="btn btn-medium border dark xround-7 uppercase" href="#">Border Dark</a>
        <a class="btn btn-medium border xdark xround-7 uppercase" href="#">Border Dark</a>
        <a class="btn btn-medium border light uppercase" href="#"> <i class="fa fa-envira" aria-hidden="true"></i> Button With Icon</a>
        <a class="btn btn-medium border light uppercase" href="#"> <i class="fa fa-envira" aria-hidden="true"></i> Button With Color</a>
    </div>
    <div class="clearfix"></div>
    <div class="col-divider-margin-5"></div>
    <div class="divider-line solid light"></div>
    <div class="col-divider-margin-5"></div>
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h4 class="uppercase font-weight-7">Buttons with Animation</h4>
        <a class="btn btn-medium border light btn-anim-1 uppercase" href="#"><i class="fa fa-eye" aria-hidden="true"></i> <span>Animation 1</span></a>
        <a class="btn btn-medium border light btn-anim-2 text-blue uppercase" href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i> <span>Animation 2</span></a>
        <a class="btn btn-medium btn-dark btn-anim-1 uppercase" href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i> <span>Animation 1</span></a>
        <a class="btn btn-medium btn-orange btn-anim-2 uppercase" href="#"><i class="fa fa-eye" aria-hidden="true"></i> <span>Animation 3</span></a>
        <a class="btn btn-medium btn-cyan btn-anim-3 uppercase" href="#">
            <span>Button color</span>
        <i>Button color</i></a>
        <a class="btn btn-medium btn-cyan btn-anim-4 uppercase" href="#">
            <span>Animation 4</span>
        <i>Animation 4</i></a>
        <div class="clearfix"></div>
        <div class="col-divider-margin-5"></div>
        <div class="divider-line solid light"></div>
        <div class="col-divider-margin-5"></div>
        <div class="col-md-12 col-sm-12 col-xs-12">
            <h4 class="uppercase font-weight-7">Animated and Rounded Buttons</h4>
            <a class="btn btn-medium border light btn-anim-1 uppercase xround-2" href="#"><i class="fa fa-eye" aria-hidden="true"></i> <span>Animation 1</span></a>
            <a class="btn btn-medium border light btn-anim-2 text-blue uppercase xround-3" href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i> <span>Animation 2</span></a>
            <a class="btn btn-medium btn-dark btn-anim-1 uppercase xround-4" href="#"><i class="fa fa-graduation-cap" aria-hidden="true"></i> <span>Animation 1</span></a>
            <a class="btn btn-medium btn-orange btn-anim-2 uppercase xround-5" href="#"><i class="fa fa-eye" aria-hidden="true"></i> <span>Animation 3</span></a>
            <a class="btn btn-medium btn-cyan btn-anim-3 uppercase xround-6" href="#">
                <span>Button color</span>
            <i>Button color</i></a>
            <a class="btn btn-medium btn-cyan btn-anim-4 uppercase xround-7" href="#">
                <span>Animation 4</span>
            <i>Animation 4</i></a>
            <div class="clearfix"></div>
            <div class="col-divider-margin-5"></div>
            <div class="divider-line solid light"></div>
            <div class="col-divider-margin-5"></div>
            <h4 class="uppercase font-weight-7">Color Buttons</h4>
            <a class="btn btn-tiny btn-cyan uppercase" href="#"><span>Button Cyan</span></a>
            <a class="btn btn-small btn-cyan-dark uppercase" href="#"><span>Button cyan dark</span></a>
            <a class="btn btn-medium btn-green uppercase" href="#"><span>Button green</span></a>
            <a class="btn btn-large btn-green-dark uppercase" href="#"><span>Button green dark</span></a>
            <a class="btn btn-medium btn-blue uppercase" href="#"><span>Button blue</span></a>
            <a class="btn btn-medium btn-blue-dark uppercase" href="#"><span>Button blue dark</span></a>
            <a class="btn btn-medium btn-violet uppercase" href="#"><span>Button violet</span></a>
            <a class="btn btn-medium btn-violet-dark uppercase" href="#"><span>Button violet dark</span></a>
            <a class="btn btn-medium btn-cello uppercase" href="#"><span>Button cello</span></a>
            <a class="btn btn-medium btn-cello-dark uppercase" href="#"><span>Button cello dark</span></a>
            <a class="btn btn-medium btn-yellow uppercase" href="#"><span>Button yellow</span></a>
            <a class="btn btn-medium btn-yellow-dark uppercase" href="#"><span>Button yellow dark</span></a>
            <a class="btn btn-medium btn-orange uppercase" href="#"><span>Button orange</span></a>
            <a class="btn btn-medium btn-orange-dark uppercase" href="#"><span>Button orange dark</span></a>
            <a class="btn btn-medium btn-red uppercase" href="#"><span>Button red</span></a>
            <a class="btn btn-medium btn-red-dark uppercase" href="#"><span>Button red dark</span></a>
            <a class="btn btn-medium btn-grey uppercase" href="#"><span>Button grey</span></a>
            <a class="btn btn-medium btn-grey-dark uppercase" href="#"><span>Button grey dark</span></a>
            <div class="clearfix"></div>
            <div class="col-divider-margin-5"></div>
            <div class="divider-line solid light"></div>
            <div class="col-divider-margin-5"></div>
            <h4 class="uppercase font-weight-7">Color 3d Buttons</h4>
            <a class="btn btn-tiny btn-cyan btn-3d uppercase xround-1" href="#"><span>Button Cyan</span></a>
            <a class="btn btn-small btn-cyan-dark btn-3d xround-1 uppercase" href="#"><span>Button cyan dark</span></a>
            <a class="btn btn-medium btn-green btn-3d xround-1 uppercase" href="#"><span>Button green</span></a>
            <a class="btn btn-large btn-green-dark btn-3d xround-1 uppercase" href="#"><span>Button green dark</span></a>
            <a class="btn btn-medium btn-blue btn-3d xround-1 uppercase" href="#"><span>Button blue</span></a>
            <a class="btn btn-medium btn-blue-dark btn-3d xround-1 uppercase" href="#"><span>Button blue dark</span></a>
            <a class="btn btn-medium btn-violet btn-3d xround-1 uppercase" href="#"><span>Button violet</span></a>
            <a class="btn btn-medium btn-violet-dark btn-3d xround-1 uppercase" href="#"><span>Button violet dark</span></a>
            <a class="btn btn-medium btn-cello btn-3d xround-1 uppercase" href="#"><span>Button cello</span></a>
            <a class="btn btn-medium btn-cello-dark btn-3d xround-1 uppercase" href="#"><span>Button cello dark</span></a>
            <a class="btn btn-medium btn-yellow btn-3d xround-1 uppercase" href="#"><span>Button yellow</span></a>
            <a class="btn btn-medium btn-yellow-dark btn-3d xround-1 uppercase" href="#"><span>Button yellow dark</span></a>
            <a class="btn btn-medium btn-orange btn-3d xround-1 uppercase" href="#"><span>Button orange</span></a>
            <a class="btn btn-medium btn-orange-dark btn-3d xround-1 uppercase" href="#"><span>Button orange dark</span></a>
            <a class="btn btn-medium btn-red btn-3d xround-1 uppercase" href="#"><span>Button red</span></a>
            <a class="btn btn-medium btn-red-dark btn-3d xround-1 uppercase" href="#"><span>Button red dark</span></a>
            <a class="btn btn-medium btn-grey btn-3d xround-1 uppercase" href="#"><span>Button grey</span></a>
            <a class="btn btn-medium btn-grey-dark btn-3d xround-1 uppercase" href="#"><span>Button grey dark</span></a>
            <div class="clearfix"></div>
            <div class="col-divider-margin-5"></div>
            <div class="divider-line solid light"></div>
            <div class="col-divider-margin-5"></div>
            <h4 class="uppercase font-weight-7"> Button Color borders</h4>
            <a class="btn btn-tiny border border-cyan uppercase" href="#"><span>Border Cyan</span></a>
            <a class="btn btn-medium border border-green uppercase" href="#"><span>Border green</span></a>
            <a class="btn btn-medium border border-blue uppercase" href="#"><span>Border blue</span></a>
            <a class="btn btn-medium border border-violet uppercase" href="#"><span>Border violet</span></a>
            <a class="btn btn-medium border border-cello uppercase" href="#"><span>Border cello</span></a>
            <a class="btn btn-medium border border-yellow uppercase" href="#"><span>Border yellow</span></a>
            <a class="btn btn-medium border border-orange uppercase" href="#"><span>Border orange</span></a>
            <a class="btn btn-medium border border-red uppercase" href="#"><span>Border red</span></a>
            <a class="btn btn-medium border border-grey uppercase" href="#"><span>Border grey</span></a>
            <a class="btn btn-medium border border-dark uppercase" href="#"><span>Border dark</span></a>
            <a class="btn btn-medium border border-xdark uppercase" href="#"><span>Border full dark</span></a>
            <a class="btn btn-tiny border border-cyan uppercase xround-1" href="#"><span>Border Cyan</span></a>
            <a class="btn btn-medium border border-green uppercase xround-2" href="#"><span>Border green</span></a>
            <a class="btn btn-medium border border-blue uppercase xround-3" href="#"><span>Border blue</span></a>
            <a class="btn btn-medium border border-violet uppercase xround-4" href="#"><span>Border violet</span></a>
            <a class="btn btn-medium border border-cello uppercase xround-5" href="#"><span>Border cello</span></a>
            <a class="btn btn-medium border border-yellow uppercase xround-6" href="#"><span>Border yellow</span></a>
            <a class="btn btn-medium border border-orange uppercase xround-7" href="#"><span>Border orange</span></a>
            <a class="btn btn-medium border border-red uppercase xround-7" href="#"><span>Border red</span></a>
            <a class="btn btn-medium border border-grey uppercase xround-7" href="#"><span>Border grey</span></a>
            <a class="btn btn-medium border border-dark uppercase xround-7" href="#"><span>Border dark</span></a>
            <a class="btn btn-medium border border-xdark uppercase xround-7" href="#"><span>Border full dark</span></a>
            <div class="clearfix"></div>
            <div class="col-divider-margin-5"></div>
            <div class="divider-line solid light"></div>
            <div class="col-divider-margin-5"></div>
            <h4 class="uppercase font-weight-7"> Button Color borders</h4>
            <a class="btn btn-tiny border border-2x border-cyan uppercase" href="#"><span>Border Cyan</span></a>
            <a class="btn btn-medium border border-2x border-green uppercase" href="#"><span>Border green</span></a>
            <a class="btn btn-medium border border-2x border-blue uppercase" href="#"><span>Border blue</span></a>
            <a class="btn btn-medium border border-2x border-violet uppercase" href="#"><span>Border violet</span></a>
            <a class="btn btn-medium border border-2x border-cello uppercase" href="#"><span>Border cello</span></a>
            <a class="btn btn-medium border border-2x border-yellow uppercase" href="#"><span>Border yellow</span></a>
            <a class="btn btn-medium border border-2x border-orange uppercase" href="#"><span>Border orange</span></a>
            <a class="btn btn-medium border border-2x border-red uppercase" href="#"><span>Border red</span></a>
            <a class="btn btn-medium border border-2x border-grey uppercase" href="#"><span>Border grey</span></a>
            <a class="btn btn-medium border border-2x border-dark uppercase" href="#"><span>Border dark</span></a>
            <a class="btn btn-medium border border-2x border-xdark uppercase" href="#"><span>Border full dark</span></a>
            <a class="btn btn-tiny border border-2x border-cyan uppercase xround-1" href="#"><span>Border Cyan</span></a>
            <a class="btn btn-medium border border-2x border-green uppercase xround-2" href="#"><span>Border green</span></a>
            <a class="btn btn-medium border border-2x border-blue uppercase xround-3" href="#"><span>Border blue</span></a>
            <a class="btn btn-medium border border-2x border-violet uppercase xround-4" href="#"><span>Border violet</span></a>
            <a class="btn btn-medium border border-2x border-cello uppercase xround-5" href="#"><span>Border cello</span></a>
            <a class="btn btn-medium border border-2x border-yellow uppercase xround-6" href="#"><span>Border yellow</span></a>
            <a class="btn btn-medium border border-2x border-orange uppercase xround-7" href="#"><span>Border orange</span></a>
            <a class="btn btn-medium border border-2x border-red uppercase xround-7" href="#"><span>Border red</span></a>
            <a class="btn btn-medium border border-2x border-grey uppercase xround-7" href="#"><span>Border grey</span></a>
            <a class="btn btn-medium border border-2x border-dark uppercase xround-7" href="#"><span>Border dark</span></a>
            <a class="btn btn-medium border border-2x border-xdark uppercase xround-7" href="#"><span>Border full dark</span></a>
        </div>
        <!--end col-->
    </div>
</div>