Buttons

Buttons are used in almost every website in forms, toolbars, homepages, dialog boxes. If the user has to do an action or submit data to the server, a button is used to initiate the action.

COMPONENT DEMO

Normal Buttons

            <!-- NORMAL BUTTON -->
            <button class="btn">START</button>

            <!-- DARK THEME BUTTON -->
            <button class="btn btn-dark">DARK BUTTON</button>

COLORFUL BUTTONS

            <!-- PRIMARY BUTTON COMPONENT -->
            <!-- Here in documentation it might be looking without a background
            because the background color of alert and the container is matching -->

            <button class="btn btn-primary">PRIMARY BUTTON</button>

            <!-- SECONDARY BUTTON COMPONENT -->
            <button class="btn btn-secondary">SECONDARY BUTTON</button>

            <!-- ERROR BUTTON COMPONENT -->
            <button class="btn btn-error">ERROR</button>

            <!-- WARNING BUTTON COMPONENT -->
            <button class="btn btn-warning">WARNING</button>

            <!-- SUCCESS BUTTON COMPONENT -->
            <button class="btn btn-success">SUCCESS</button>

            <!-- INFO BUTTON COMPONENT -->
            <button class="btn btn-info">INFO</button>

BUTTONS WITH COLORS ON HOVER

            <!-- PRIMARY BUTTON WITH DIFFERENT COLOR WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-primary btn-primary-hover">
              PRIMARY BUTTON
            </button>

            <!-- SECONDARY BUTTON WITH DIFFERENT COLOR
                         WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-secondary btn-secondary-hover">
              SECONDARY BUTTON
            </button>

            <!-- ERROR BUTTON WITH DIFFERENT COLOR
                         WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-error btn-error-hover">ERROR</button>

            <!-- WARNING BUTTON WITH DIFFERENT COLOR 
                        WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-warning btn-warning-hover">WARNING</button>

            <!-- SUCCESS BUTTON WITH DIFFERENT COLOR
                         WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-success btn-success-hover">SUCCESS</button>

            <!-- INFO BUTTON WITH DIFFERENT COLOR 
                        WHEN MOUSE IS PLACED ON IT -->
            <button class="btn btn-info btn-info-hover">INFO</button>

BUTTONS WITH ICONS AND HOVER COLORS

            <!-- PRIMARY BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-primary btn-primary-hover">
              <span>
                <i class="fas fa-home fa-2x px-3"></i>
                PRIMARY BUTTON
              </span>
            </button>

            <!-- SECONDARY BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-secondary btn-secondary-hover">
              <span>
                <i class="fab fa-searchengin fa-2x px-3"></i>
                SECONDARY BUTTON
              </span>
            </button>

            <!-- ERROR BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-error btn-error-hover">
              <span>
                <i class="fas fa-exclamation-triangle px-3 fa-2x"></i>
                ERROR
              </span>
            </button>

            <!-- WARNING BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-warning btn-warning-hover">
              <span>
                <i class="fas fa-exclamation fa-2x px-3"></i>
                WARNING
              </span>
            </button>

            <!-- SUCCESS BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-success btn-success-hover">
              <span>
                <i class="fas fa-check fa-2x px-3"></i>
                SUCCESS
              </span>
            </button>

            <!-- INFO BUTTONS WITH ICONS
                    AND A DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-info btn-info-hover">
              <span>
                <i class="fas fa-info-circle fa-2x px-3"></i>
                INFO
              </span>
            </button>

ICON BUTTONS

            <!-- ONLY PRIMARY ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-primary btn-primary-hover">
              <span>
                <i class="fas fa-home fa-2x px-3"></i>
              </span>
            </button>

            <!-- ONLY SECONDARY ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-secondary btn-secondary-hover">
              <span>
                <i class="fab fa-searchengin fa-2x px-3"></i>
              </span>
            </button>

            <!-- ONLY ERROR ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-error btn-error-hover">
              <span>
                <i class="fas fa-exclamation-triangle px-3 fa-2x"></i>
              </span>
            </button>

            <!-- ONLY WARNING ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-warning btn-warning-hover">
              <span>
                <i class="fas fa-exclamation fa-2x px-3"></i>
              </span>
            </button>

            <!-- ONLY SUCCESS ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-success btn-success-hover">
              <span>
                <i class="fas fa-check fa-2x px-3"></i>
              </span>
            </button>

            <!-- ONLY INFO ICON BUTTONS 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-icon btn-info btn-info-hover">
              <span>
                <i class="fas fa-info-circle fa-2x px-3"></i>
              </span>
            </button>

LINKS AS BUTTONS WITH HOVER

            <!-- PRIMARY LINK BUTTON COMPONENT
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-primary-hover btn-link">
              <a href="#" class="link-none"> PRIMARY LINK BUTTON </a>
            </button>

            <!-- SECONDARY LINK BUTTON COMPONENT 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT-->
            <button class="btn btn-secondary-hover btn-link">
              <a href="#" class="link-none"> SECONDARY LINK BUTTON </a>
            </button>

            <!-- SUCCESS LINK BUTTON COMPONENT
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-success-hover btn-link">
              <a href="#" class="link-none"> SUCCESS LINK BUTTON </a>
            </button>

            <!-- WARNING LINK BUTTON COMPONENT 
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT-->
            <button class="btn btn-warning-hover btn-link">
              <a href="#" class="link-none"> WARNING LINK BUTTON </a>
            </button>

            <!-- ERROR LINK BUTTON COMPONENT
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-error-hover btn-link">
              <a href="#" class="link-none"> ERROR LINK BUTTON </a>
            </button>

            <!-- INFO LINK BUTTON COMPONENT
                    WITH DIFFERENT COLOR WHEN MOUSE 
                    IS PLACED ON IT -->
            <button class="btn btn-info-hover btn-link">
              <a href="#" class="link-none">INFO LINK BUTTON</a>
            </button>

DISABLED BUTTON

            <!-- DISABLED BUTTON COMPONENT -->
            <button class="btn btn-disabled">DISABLED</button>

Gentle UI

COMPONENTS

ALERT

AVATARS

BADGES

BUTTONS

CARDS

GRIDS

IMAGES

INPUT

LISTS

MODALS

NAVIGATION

RATINGS

SLIDERS

TEXT UTILITIES

TOASTS

BUTTONS

COMPONENT DEMO