Buttons

<section class="buttons">
    <div class="button-style-1">
        <div class="container">
            <h2>Buttons Style 1</h2>
            <div class="item">
                <a href="#" class="btn btn-primary btn-style-1 btn-style-sm" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-1 btn-style-md" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-1 btn-style-lg" title="Title">BUTTON</a>
            </div>
        </div>
    </div>
</section>
Copy to clipboard

<section class="buttons">
    <div class="button-style-2">
        <div class="container">
            <h2>Buttons Style 2</h2>
            <div class="item">
                <a href="#" class="btn btn-primary btn-style-2 btn-style-sm" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-2 btn-style-md" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-2 btn-style-lg" title="Title">BUTTON</a>
            </div>
        </div>
    </div>
</section>
Copy to clipboard

<section class="buttons">
    <div class="button-style-3">
        <div class="container">
            <h2>Buttons Style 3</h2>
            <div class="item">
                <a href="#" class="btn btn-primary btn-style-3 btn-style-sm" title="Title">Read More
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                    </svg>
                </a>
                <a href="#" class="btn btn-primary btn-style-3 btn-style-md" title="Title">Read More
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                    </svg>
                </a>
                <a href="#" class="btn btn-primary btn-style-3 btn-style-lg" title="Title">Read More
                    <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                        <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>
</section>
Copy to clipboard

<section class="buttons">
    <div class="button-style-4">
        <div class="container">
            <h2>Buttons Style 4</h2>
            <div class="item">
                <a href="#" class="btn btn-primary btn-style-4 btn-style-sm" title="Title">
                    <span>BUTTON</span>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                            <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                        </svg>
                    </span>
                </a>
                <a href="#" class="btn btn-primary btn-style-4 btn-style-md" title="Title">
                    <span>BUTTON</span>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                            <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                        </svg>
                    </span>
                </a>
                <a href="#" class="btn btn-primary btn-style-4 btn-style-lg" title="Title">
                    <span>BUTTON</span>
                    <span>
                        <svg xmlns="http://www.w3.org/2000/svg" width="34" height="23.375" viewBox="0 0 34 23.375">
                            <path data-name="Icon ionic-ios-arrow-round-forward" d="M29.558,11.7a1.626,1.626,0,0,0-.012,2.24l7.18,7.414H9.4a1.584,1.584,0,0,0,0,3.165H36.714l-7.18,7.414a1.638,1.638,0,0,0,.012,2.24,1.5,1.5,0,0,0,2.161-.012l9.731-10.1h0a1.783,1.783,0,0,0,.319-.5,1.551,1.551,0,0,0,.118-.609,1.613,1.613,0,0,0-.437-1.108l-9.731-10.1A1.473,1.473,0,0,0,29.558,11.7Z" transform="translate(-7.875 -11.251)" fill="#111"></path>
                        </svg>
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>
Copy to clipboard

<section class="buttons">
    <div class="button-style-5">
        <div class="container">
            <h2>Buttons Style 5</h2>
            <div class="item">
                <a href="#" class="btn btn-primary btn-style-5 btn-style-sm" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-5 btn-style-md" title="Title">BUTTON</a>
                <a href="#" class="btn btn-primary btn-style-5 btn-style-lg" title="Title">BUTTON</a>
            </div>
        </div>
    </div>
</section>
Copy to clipboard