Buttons

Buttons Style 1

Button Button Button
Button Button Button
Button Button Button 
                        
<div class="button-style">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-rounded-2 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-primary btn-rounded-2" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-primary btn-rounded-2 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-secondary btn-rounded-2 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-secondary btn-rounded-2" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-secondary btn-rounded-2 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-dark btn-rounded-2 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-dark btn-rounded-2" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-dark btn-rounded-2 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 2

Button Button Button
Button Button Button
Button Button Button 
                        
<div class="button-style">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-primary btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-primary btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-secondary btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-secondary btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-secondary btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-dark btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-dark btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-dark btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 3

Button Button Button
Button Button Button
Button Button Button 
                        
<div class="button-style">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-outline-primary btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-primary btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-outline-secondary btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-secondary btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-secondary btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-outline-dark btn-rounded-1 btn-sm" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-dark btn-rounded-1" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-outline-dark btn-rounded-1 btn-lg" title="Title">Button
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 42037" d="M326.027,190.4v65.626H260.4v18.749h65.625V340.4h18.75V274.775H410.4V256.026H344.777V190.4Z" transform="translate(-260.402 -190.4)" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 4

Button Button Button
Button Button Button
Button Button Button 
                        
<div class="button-style">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-rounded-0 btn-sm" title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-rounded-0" title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-rounded-0 btn-lg" title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-secondary btn-rounded-0 btn-sm" title="Title">Button</a>
                    <a href="#" class="btn btn-secondary btn-rounded-0" title="Title">Button</a>
                    <a href="#" class="btn btn-secondary btn-rounded-0 btn-lg" title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-dark btn-rounded-0 btn-sm" title="Title">Button</a>
                    <a href="#" class="btn btn-dark btn-rounded-0" title="Title">Button</a>
                    <a href="#" class="btn btn-dark btn-rounded-0 btn-lg" title="Title">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 5

Read More Read More Read More
Read More Read More Read More
Read More Read More Read More 
                        
<div class="button-style">
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-link btn-link-primary btn-sm" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-primary" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-primary btn-lg" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-link btn-link-secondary btn-sm" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-secondary" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-secondary btn-lg" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-link btn-link-dark btn-sm" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-dark" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-dark btn-lg" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="149.998" height="149.998" viewBox="0 0 149.998 149.998">
                            <path data-name="Subtraction 84" d="M75,150A75.019,75.019,0,0,1,45.806,5.894,75.018,75.018,0,0,1,104.192,144.1,74.529,74.529,0,0,1,75,150ZM41.665,69.735V80.261h28.07V108.33H80.26V80.261h28.07V69.735H80.26V41.665H69.735v28.07Z" fill="#0a2046"/>
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>