BUTTONS | wfast-translation

Button Style 1

BUTTON BUTTON BUTTON

                
                        
    <div class="item buttons-one">
        <h3>Button Style 1</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-primary btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-primary btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-primary btn-style-1" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-1">
            <a href="#" class="btn btn-sm btn-secondary btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-secondary btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-secondary btn-style-1" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-1">
            <a href="#" class="btn btn-sm btn-success btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-success btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-success btn-style-1" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-1">
            <a href="#" class="btn btn-sm btn-danger btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-danger btn-style-1" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-danger btn-style-1" title="Button">BUTTON</a>
            </div>
        </div>
    </div>

Button Style 2

BUTTON BUTTON BUTTON

                
                        
    <div class="item buttons-two">
        <h3>Button Style 2</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-primary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-primary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-primary btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-2">
            <a href="#" class="btn btn-sm btn-secondary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-secondary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-secondary btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-2">
            <a href="#" class="btn btn-sm btn-success btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-success btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-success btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-2">
            <a href="#" class="btn btn-sm btn-danger btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-danger btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-danger btn-style-2" title="Button">BUTTON</a>
            </div>
        </div>
    </div>

Button Style 3

BUTTON BUTTON BUTTON

                
                        
    <div class="item buttons-three">
        <h3>Button Style 3</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-primary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-primary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-primary btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-3">
            <a href="#" class="btn btn-sm btn-secondary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-secondary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-secondary btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-3">
            <a href="#" class="btn btn-sm btn-success btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-success btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-success btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12 btn-style-3">
            <a href="#" class="btn btn-sm btn-danger btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-danger btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-danger btn-style-3" title="Button">BUTTON</a>
            </div>
        </div>
    </div>

Button Style 4

BUTTON BUTTON BUTTON

                
                        
    <div class="item buttons-four">
        <h3>Button Style 4</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-primary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-primary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-primary btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-secondary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-secondary btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-secondary btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-success btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-success btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-success btn-style-2" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-danger btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-danger btn-style-2" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-danger btn-style-2" title="Button">BUTTON</a>
            </div>
        </div>
    </div>

Button Style 5

BUTTON BUTTON BUTTON

                
                        
    <div class="item buttons-five">
        <h3>Button Style 5</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-primary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-primary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-primary btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-secondary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-secondary btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-secondary btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-success btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-success btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-success btn-style-3" title="Button">BUTTON</a>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
            <a href="#" class="btn btn-sm btn-outline-danger btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-md btn-outline-danger btn-style-3" title="Button">BUTTON</a>
            <a href="#" class="btn btn-lg btn-outline-danger btn-style-3" title="Button">BUTTON</a>
            </div>
        </div>
    </div>

Button Style 6

READ MORE READ MORE READ MORE

                
                        
    <div class="item buttons-six">
        <h3>Button Style 6</h3>
        <div class="row">
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
                <div class="item">
                    <a href="#" class="btn btn-sm btn-primary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-md btn-primary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-lg btn-primary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
                <div class="item">
                    <a href="#" class="btn btn-sm btn-secondary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-md btn-secondary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-lg btn-secondary btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
                <div class="item">
                    <a href="#" class="btn btn-sm btn-success btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-md btn-success btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-lg btn-success btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                </div>
            </div>
            <div class="col-lg-2 col-md-6 col-sm-12 col-12">
                <div class="item">
                    <a href="#" class="btn btn-sm btn-danger btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-md btn-danger btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                    <a href="#" class="btn btn-lg btn-danger btn-style-7" title="Button">READ MORE &nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="50" height="33.333" viewBox="0 0 50 33.333">
                        <path d="M.638,18.114a2.268,2.268,0,0,0,3.194.017L14.4,7.589V47.76a2.257,2.257,0,0,0,4.514,0V7.589L29.49,18.149a2.284,2.284,0,0,0,3.194-.017,2.249,2.249,0,0,0-.017-3.178L18.258.643h0a2.534,2.534,0,0,0-.712-.469A2.153,2.153,0,0,0,16.679,0,2.262,2.262,0,0,0,15.1.643L.69,14.953A2.213,2.213,0,0,0,.638,18.114Z" transform="translate(50) rotate(90)"></path>
                    </svg></a>
                </div>
            </div>
        </div>
    </div>