Buttons

Basic Colors

                                
                                    <!-- Primary -->
                                    <button class="btn btn-primary me-2">Button</button>

                                    <!-- Secondary -->
                                    <button class="btn btn-secondary mx-2">Button</button>

                                    <!-- Success -->
                                    <button class="btn btn-success mx-2">Button</button>

                                    <!-- Warning -->
                                    <button class="btn btn-warning mx-2">Button</button>

                                    <!-- Danger -->
                                    <button class="btn btn-danger mx-2">Button</button>

                                    <!-- Info -->
                                    <button class="btn btn-info mx-2">Button</button>

                                    <!-- Light -->
                                    <button class="btn btn-light mx-2">Button</button>

                                    <!-- Dark -->
                                    <button class="btn btn-dark ms-2">Button</button>
                                
                            

University Colors

                                
                                    <!-- Blue -->
                                    <button class="btn btn-blue me-2">Button</button>

                                    <!-- Aqua -->
                                    <button class="btn btn-aqua mx-2">Button</button>

                                    <!-- FK -->
                                    <button class="btn btn-fk mx-2">Button</button>

                                    <!-- FKG -->
                                    <button class="btn btn-fkg mx-2">Button</button>

                                    <!-- FP -->
                                    <button class="btn btn-fp mx-2">Button</button>

                                    <!-- FHIK -->
                                    <button class="btn btn-fhik mx-2">Button</button>

                                    <!-- FHBD -->
                                    <button class="btn btn-fhbd mx-2">Button</button>

                                    <!-- FTRC -->
                                    <button class="btn btn-ftrc ms-2">Button</button>
                                
                            

Subtle Colors

                                
                                    <!-- Primary -->
                                    <button class="btn btn-primary-subtle mr-2">Button</button>

                                    <!-- Secondary -->
                                    <button class="btn btn-secondary-subtle mx-2">Button</button>

                                    <!-- Success -->
                                    <button class="btn btn-success-subtle mx-2">Button</button>

                                    <!-- Warning -->
                                    <button class="btn btn-warning-subtle mx-2">Button</button>

                                    <!-- Danger -->
                                    <button class="btn btn-danger-subtle mx-2">Button</button>

                                    <!-- Info -->
                                    <button class="btn btn-info-subtle mx-2">Button</button>
                                
                            

Subtle University Colors

                                
                                    <!-- Blue -->
                                    <button class="btn btn-blue-subtle me-2">Button</button>

                                    <!-- Aqua -->
                                    <button class="btn btn-aqua-subtle mx-2">Button</button>

                                    <!-- FK -->
                                    <button class="btn btn-fk-subtle mx-2">Button</button>

                                    <!-- FKG -->
                                    <button class="btn btn-fkg-subtle mx-2">Button</button>

                                    <!-- FP -->
                                    <button class="btn btn-fp-subtle mx-2">Button</button>

                                    <!-- FHIK -->
                                    <button class="btn btn-fhik-subtle mx-2">Button</button>

                                    <!-- FHBD -->
                                    <button class="btn btn-fhbd-subtle mx-2">Button</button>

                                    <!-- FTRC -->
                                    <button class="btn btn-ftrc-subtle ms-2">Button</button>
                                
                            

Hover Effects

                                
                                    <!-- Elevate up -->
                                    <button class="btn btn-primary hover-elevate-up me-2">Elevate up</button>

                                    <!-- Elevate down -->
                                    <button class="btn btn-primary hover-elevate-down mx-2">Elevate down</button>

                                    <!-- Scale -->
                                    <button class="btn btn-danger hover-scale mx-2">Scale</button>

                                    <!-- Rotate to end -->
                                    <button class="btn btn-success hover-rotate-end mx-2">Rotate to end</button>

                                    <!-- Rotate to start -->
                                    <button class="btn btn-warning hover-rotate-start ms-2">Rotate to start</button>
                                
                            

Type Options

                                
                                    <!-- Rounded -->
                                    <button class="btn btn-primary btn-rounded me-2">Rounded</button>

                                    <!-- Squared -->
                                    <button class="btn btn-primary btn-squared ms-2">Squared</button>
                                
                            

Size Options

                                
                                    <!-- Small -->
                                    <button class="btn btn-primary btn-sm me-2">Button</button>

                                    <!-- Normal -->
                                    <button class="btn btn-primary mx-2">Button</button>

                                    <!-- Large -->
                                    <button class="btn btn-primary btn-lg ms-2">Button</button>