Logo
Stockholm-icons / Layout / Layout-4-blocks Created with Sketch.
Stockholm-icons / Communication / Chat6 Created with Sketch.
Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Keen extends Bootstrap Buttons with a variety of options to provide unique looking buttons that matches Keen's design standards.
For more info on the original Bootstrap utilities please visit the official Bootstrap Documentation.

Base Examples

Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.

Use btn-{color} class to set custom color for buttons where {color} can be white|primary|secondary|success|info|warning|danger|light|dark.


                        <button type="button" class="btn btn-primary">Primary</button>
                        <button type="button" class="btn btn-secondary">Secondary</button>
                        <button type="button" class="btn btn-success">Success</button>
                        <button type="button" class="btn btn-danger">Danger</button>
                        <button type="button" class="btn btn-warning">Warning</button>
                        <button type="button" class="btn btn-info">Info</button>
                        <button type="button" class="btn btn-light">Light</button>
                        <button type="button" class="btn btn-dark">Dark</button>
                        <button type="button" class="btn btn-link">Link</button>

Button Tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may render slightly different).

Link

                        <a class="btn btn-secondary" href="#" role="button">Link</a>
                        <button class="btn btn-secondary" type="submit">Button</button>
                        <input class="btn btn-secondary" type="button" value="Input"/>
                        <input class="btn btn-secondary" type="submit" value="Submit"/>
                        <input class="btn btn-secondary" type="reset" value="Reset"/>

Outline Buttons

Replace the default modifier classes with .btn-outline-* to remove all background images and colors on any button.


                        <button type="button" class="btn btn-outline-primary">Primary</button>
                        <button type="button" class="btn btn-outline-secondary">Secondary</button>
                        <button type="button" class="btn btn-outline-success">Success</button>
                        <button type="button" class="btn btn-outline-danger">Danger</button>
                        <button type="button" class="btn btn-outline-warning">Warning</button>
                        <button type="button" class="btn btn-outline-info">Info</button>
                        <button type="button" class="btn btn-outline-dark">Dark</button>

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.


                        <button type="button" class="btn btn-primary btn-sm">Small button</button>
                        <button type="button" class="btn btn-primary">Default button</button>
                        <button type="button" class="btn btn-primary btn-lg">Large button</button>

Add block type buttons that span the full width of a parent by adding .btn-block.


                        <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
                        <button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>

States

Active State

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active with .active.


                        <a href="#" class="btn btn-primary active">Active state</a>
                        <a href="#" class="btn btn-success active">Active state</a>
                        <a href="#" class="btn btn-danger active">Active state</a>
                        <a href="#" class="btn btn-warning active">Active state</a>
Disabled State

Make buttons look inactive by adding the disabled boolean attribute to any button element.


                        <button class="btn btn-primary" disabled>Disabled state</button>
                        <button class="btn btn-success" disabled>Disabled state</button>
                        <button class="btn btn-danger" disabled>Disabled state</button>
                        <button class="btn btn-warning" disabled>Disabled state</button>

Checkbox And Radio Buttons

Bootstrap’s button styles can be applied to other elements, such as labels, to provide checkbox or radio style button toggling.


                        <div class="btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-success active">
                                <input type="checkbox" checked="checked"/> Checked
                            </label>
                        </div>

                        <div class="btn-group btn-group-toggle" data-toggle="buttons">
                            <label class="btn btn-success active">
                                <input type="radio" name="options" id="option1" checked="checked"/> Active
                            </label>
                            <label class="btn btn-success">
                                <input type="radio" name="options" id="option2"/> Radio
                            </label>
                            <label class="btn btn-success">
                                <input type="radio" name="options" id="option3"/> Radio
                            </label>
                        </div>

Button Font Styles

Button font styles can be set using special helper classes font-weight-{lighter|light|normal|bold|bolder|boldest}.


                        <a href="#" class="btn btn-secondary font-weight-lighter mr-2">Lighter</a>
                        <a href="#" class="btn btn-secondary font-weight-light mr-2">Light</a>
                        <a href="#" class="btn btn-secondary font-weight-normal mr-2">Normal</a>
                        <a href="#" class="btn btn-secondary font-weight-bold mr-2">Bold</a>
                        <a href="#" class="btn btn-secondary font-weight-bolder">Bolder</a>
                        <a href="#" class="btn btn-secondary font-weight-boldest">Boldest</a>
                        

Uppercase and lowercase texts can be set using .text-uppercase and .text-lowercase classes respectively.


                        <a href="#" class="btn btn-secondary text-uppercase mr-2">Uppercase</a>
                        <a href="#" class="btn btn-secondary text-lowercase">Lowercase</a>
                        

Button Styles

Use .btn-square classes to have square style buttons.


                        <a href="#" class="btn btn-success font-weight-bold btn-pill">Success</a>
                        <a href="#" class="btn btn-primary font-weight-bold btn-pill">Primary</a>
                        <a href="#" class="btn btn-danger font-weight-bold btn-pill">Danger</a>
                        <a href="#" class="btn btn-warning font-weight-bold btn-pill">Warning</a>
                        <a href="#" class="btn btn-dark font-weight-bold btn-pill">Dark</a>
                        

Use .btn-pill classes to have pill style buttons.


                        <a href="#" class="btn btn-success font-weight-bold btn-square">Success</a>
                        <a href="#" class="btn btn-primary font-weight-bold btn-square">Primary</a>
                        <a href="#" class="btn btn-danger font-weight-bold btn-square">Danger</a>
                        <a href="#" class="btn btn-warning font-weight-bold btn-square">Warning</a>
                        <a href="#" class="btn btn-dark font-weight-bold btn-square">Dark</a>
                        

Custom Buttons

Keen extends Bootstrap with custom button styles.


                        <a href="#" class="btn btn-default font-weight-bold mr-2">Default Button</a>
                        <a href="#" class="btn btn-light font-weight-bold mr-2">Light Button</a>
                        <a href="#" class="btn btn-clean font-weight-bold">Clean Button</a>
                        

Customed Buttons

Keen Bootstrap standard unitlity classes to change button size and spacing.


                        <a href="#" class="btn btn-default font-weight-bold font-size-h5 px-8 py-3 mr-2">Button</a>
                        <a href="#" class="btn btn-danger font-weight-bold font-size-h6 px-10 py-4 mr-2">Button</a>
                        <a href="#" class="btn btn-primary font-weight-bold font-size-h3 px-12 py-5">Button</a>
                        

Mixed Buttons

Mix buttons with Keen elements

Hi, Sean S
Hi, Sean S
Sean UX Designer
Pic

                        <div class="btn btn-icon w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
                            <span class="text-muted font-weight-bold font-size-base mr-1">Hi,</span>
                            <span class="text-dark-50 font-weight-bolder font-size-base mr-3">Sean</span>
                            <span class="symbol symbol-35 symbol-light-warning">
                                <span class="symbol-label font-size-h5 font-weight-bold">S</span>
                            </span>
                        </div>

                        <div class="btn btn-icon btn-light w-auto btn-clean d-inline-flex align-items-center btn-lg px-2 mr-5">
                            <span class="text-muted font-weight-bold font-size-base mr-1">Hi,</span>
                            <span class="text-dark-50 font-weight-bolder font-size-base mr-3">Sean</span>
                            <span class="symbol symbol-35 symbol-light-primary">
                                <span class="symbol-label font-size-h5 font-weight-bold">S</span>
                            </span>
                        </div>

                        <div class="btn btn-light-success d-inline-flex align-items-center btn-lg mr-5">
                            <div class="d-flex flex-column text-right pr-3">
                                <span class="text-dark-75 font-weight-bold font-size-sm">Sean</span>
                                <span class="font-weight-bolder font-size-sm">UX Designer</span>
                        	</div>
                            <span class="symbol symbol-40">
                                <img alt="Pic" src="media/images/users/150-7.jpg"/>
                            </span>
                        </div>
                        

Light Buttons

Use btn-light-{color} class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-light-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-light-primary font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-light-danger font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-light-warning font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-light-dark font-weight-bold">Dark</a>

Light Hover Buttons

Use btn-light-{color} class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-text-success btn-hover-light-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-text-primary btn-hover-light-primary font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-text-danger btn-hover-light-danger font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-text-warning btn-hover-light-warning font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-text-dark btn-hover-light-dark font-weight-bold mr-2">Dark</a>
                        

Hover Background Buttons

Use btn-light-{color} class to have a custom button style with a lighter background color and dark font color.


                        <a href="#" class="btn btn-hover-bg-success btn-text-success btn-hover-text-white border-0 font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-hover-bg-primary btn-text-primary btn-hover-text-white border-0 font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-hover-bg-danger btn-text-danger btn-hover-text-white border-0 font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-hover-bg-warning btn-text-warning btn-hover-text-white border-0 font-weight-bold mr-2">Warning</a>
                        <a href="#" class="btn btn-hover-bg-dark btn-text-dark btn-hover-text-white border-0 font-weight-bold mr-2">Dark</a>
                        

Transparent Buttons

Use btn-transparent-{color} class to have a custom button style with a transparent background color.


                        <div class="d-flex align-items-center p-4 bg-dark">
                            <a href="#" class="btn btn-transparent-success font-weight-bold mr-2">Success</a>
                            <a href="#" class="btn btn-transparent-primary font-weight-bold mr-2">Primary</a>
                            <a href="#" class="btn btn-transparent-danger font-weight-bold mr-2">Danger</a>
                            <a href="#" class="btn btn-transparent-warning font-weight-bold mr-2">Warning</a>
                            <a href="#" class="btn btn-transparent-white font-weight-bold">White</a>
                        </div>
                        

Transparent Hover Buttons

Use btn-hover-transparent-{color} class to have a custom button style with a transparent hover background color.


                        <div class="d-flex align-items-center p-4 bg-dark">
                            <a href="#" class="btn btn-hover-transparent-success font-weight-bold mr-2">Success</a>
                            <a href="#" class="btn btn-hover-transparent-primary font-weight-bold mr-2">Primary</a>
                            <a href="#" class="btn btn-hover-transparent-danger font-weight-bold mr-2">Danger</a>
                            <a href="#" class="btn btn-hover-transparent-warning font-weight-bold mr-2">Warning</a>
                            <a href="#" class="btn btn-hover-transparent-white font-weight-bold">White</a>
                        </div>
                        

Link Buttons

Use btn-link-{color} class to have a custom link button.


                        <a href="#" class="btn btn-link-success font-weight-bold">Success</a>
                        <a href="#" class="btn btn-link-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-link-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-link-warning font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-link-dark font-weight-bold">Dark</a>

Button Text Colors

Use btn-text-{font-color} class to set custom color for button texts where {font-color} can be white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.


                        <a href="#" class="btn btn-light btn-text-success btn-hover-text-success font-weight-bold">Success</a>
                        <a href="#" class="btn btn-light btn-text-primary btn-hover-text-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-light btn-text-danger btn-hover-text-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-light btn-text-warning btn-hover-text-dark-50 font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-light btn-text-dark btn-hover-text-dark font-weight-bold">Dark</a>

Hover Button Option

Use btn-hover-{color} class to have a custom hover color for your buttons.


                        <a href="#" class="btn btn-light btn-hover-success font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-light btn-hover-primary font-weight-bold">Primary</a>
                        <a href="#" class="btn btn-light btn-hover-danger font-weight-bold">Danger</a>
                        <a href="#" class="btn btn-light btn-hover-warning font-weight-bold">Warning</a>
                        <a href="#" class="btn btn-light btn-hover-dark font-weight-bold">Dark</a> 

Buttons With Shadow

Use btn-shadow class to set box-shadow to your buttons.


                        <a href="#" class="btn btn-light btn-shadow font-weight-bold mr-2">Light</a>
                        <a href="#" class="btn btn-success btn-shadow font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-primary btn-shadow font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-danger btn-shadow font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-warning btn-shadow font-weight-bold mr-2">Warning</a>

Use btn-shadow-hover class to set box-shadow effect on hover to your buttons.


                        <a href="#" class="btn btn-light btn-shadow-hover font-weight-bold mr-2">Light</a>
                        <a href="#" class="btn btn-success btn-shadow-hover font-weight-bold mr-2">Success</a>
                        <a href="#" class="btn btn-primary btn-shadow-hover font-weight-bold mr-2">Primary</a>
                        <a href="#" class="btn btn-danger btn-shadow-hover font-weight-bold mr-2">Danger</a>
                        <a href="#" class="btn btn-warning btn-shadow-hover font-weight-bold mr-2">Warning</a>

Buttons With Icons

Use buttons with a wide range of Keen's awesome Icon Collection.

Use btn-text-{font-color} and btn-icon-{font-color} classes to set custom color for button texts and icons where {font-color} can be white|primary|secondary|success|info|warning|danger|light|dark|dark-75|dark-50|dark-25|muted.


                        <a href="#" class="btn btn-success">
                            <i class="flaticon2-pie-chart"></i> Success
                        </a>
                        <a href="#" class="btn btn-outline-success">
                            <i class="flaticon2-poll-symbol"></i> Success
                        </a>
                        <a href="#" class="btn btn-light-success">
                            <i class="flaticon2-chat-1"></i> Success
                        </a>
                        <a href="#" class="btn btn-success">
                            <span class="svg-icon"><svg>...</svg></span> Success
                        </a>
                        <a href="#" class="btn btn-text-dark-50 btn-icon-primary font-weight-bold btn-hover-bg-light mr-3">
                            <i class="flaticon2-pie-chart"></i> Button
                        </a>
                        

Use btn-icon class to have icon only square buttons.


                        <a href="#" class="btn btn-icon btn-success">
                            <i class="flaticon2-pie-chart"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-outline-success">
                            <i class="flaticon2-poll-symbol"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-light-success">
                            <i class="flaticon2-chat-1"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-success">
                            <span class="svg-icon"><svg>...</svg></span>
                        </a>

Social Buttons

Use buttons with social icons predefined with $social-colors variable in src\sass\components\_variables.bootstrap.scss.


                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-circle btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        

Use btn-light-{social} class to have light social buttons.


                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-circle btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>

Use btn-xs, btn-sm, btn-md and btn-lg size classes to set required button sizes.


                        <a href="#" class="btn btn-icon btn-xs btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-sm btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>
                        <a href="#" class="btn btn-icon btn-lg btn-facebook">
                            <i class="socicon-facebook"></i>
                        </a>

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9