Buttons | SHORT EDUCATION

Buttons Style 1

Button Button Button

                       
<div class="button-style-1">
    <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-style-1 btn-style-sm btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-md btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-lg btn-c-primary"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-sm btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-md btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-lg btn-c-red"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-sm btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-md btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-1 btn-style-lg btn-c-black"
                        title="Title">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 2

Button Button Button

                       
<div class="button-style-2">
    <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-style-2 btn-style-sm btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-md btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-lg btn-c-primary"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-sm btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-md btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-lg btn-c-red"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-sm btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-md btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-2 btn-style-lg btn-c-black"
                        title="Title">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 3

Button Button Button

                       
<div class="button-style-3">
    <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-style-3 btn-style-sm btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-md btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-lg btn-c-primary"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-sm btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-md btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-lg btn-c-red"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-sm btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-md btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-3 btn-style-lg btn-c-black"
                        title="Title">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Buttons Style 4

Button Button Button

                       
<div class="button-style-4">
    <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-style-4 btn-style-sm btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-md btn-c-primary"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-lg btn-c-primary"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-sm btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-md btn-c-red"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-lg btn-c-red"
                        title="Title">Button</a>
                </div>
            </div>
            <div class="col-lg-4 col-md-4 col-12">
                <div class="item">
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-sm btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-md btn-c-black"
                        title="Title">Button</a>
                    <a href="#" class="btn btn-primary btn-style-4 btn-style-lg btn-c-black"
                        title="Title">Button</a>
                </div>
            </div>
        </div>
    </div>
</div>

Button Style 5

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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-primary" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-secondary" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </svg>
                    </a>
                    <a href="#" class="btn btn-link btn-link-dark" title="Title">Read More
                        <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </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="150" height="150" viewBox="0 0 150 150">
                            <path data-name="Path 40655"
                                d="M262.6,117.6a75,75,0,1,0,75,75,75.117,75.117,0,0,0-75-75Zm0,15.518A59.483,59.483,0,1,1,203.117,192.6,59.365,59.365,0,0,1,262.6,133.118Zm-7.759,12.931v38.793H216.048v15.518h38.793v38.793h15.518V200.361h38.793V184.842H270.359V146.049Z"
                                transform="translate(-187.6 -117.6)" fill="#1e1e2c" />
                        </svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>