Skip to content
/ bootstrap-buttons Public

Responsive buttons built using Bootstrap 5. Many predefined button style classes: link, outline, round button, social, floating, fixed and more

mdbootstrap.com/docs/standard/components/buttons/
0 stars 0 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

mdbootstrap/bootstrap-buttons

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
README.md
README.md
 
 

Repository files navigation

Free Bootstrap Buttons Component

Responsive buttons built using Bootstrap 5. Many predefined button style classes: link, outline, round button, social, floating, fixed and more

How to use it?

1. Download MDB 5 - free UI KIT

2. Choose your favourite customized example and click show code to see html

3. Copy & paste the code into your MDB project

đź“„ Documentation & usage guide

▶️ Video tutorial

⚙️ Free generator

These components were built with a free Material Design UI Kit for the latest Bootstrap 5.

GitHub Stars

Basic example

<button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Hierarchy

<button type="button" class="btn btn-primary" data-mdb-ripple-init>Primary</button>
<button type="button" class="btn btn-secondary" data-mdb-ripple-init>Secondary</button>
<button type="button" class="btn btn-tertiary" data-mdb-ripple-init data-mdb-ripple-color="light">Tertiary</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Contextual

<button type="button" class="btn btn-success" data-mdb-ripple-init>Success</button>
<button type="button" class="btn btn-danger" data-mdb-ripple-init>Danger</button>
<button type="button" class="btn btn-warning" data-mdb-ripple-init>Warning</button>
<button type="button" class="btn btn-info" data-mdb-ripple-init>Info</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Neutral

<button type="button" class="btn btn-light" data-mdb-ripple-init data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-dark" data-mdb-ripple-init>Dark</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Link

<button type="button" class="btn btn-link" data-mdb-ripple-init data-mdb-ripple-color="dark">Link</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Outline

<button type="button" class="btn btn-outline-primary" data-mdb-ripple-init data-mdb-ripple-color="dark">Primary</button>
<button type="button" class="btn btn-outline-secondary" data-mdb-ripple-init data-mdb-ripple-color="dark">Secondary</button>
<button type="button" class="btn btn-outline-success" data-mdb-ripple-init data-mdb-ripple-color="dark">Success</button>
<button type="button" class="btn btn-outline-danger" data-mdb-ripple-init data-mdb-ripple-color="dark">Danger</button>
<button type="button" class="btn btn-outline-warning" data-mdb-ripple-init data-mdb-ripple-color="dark">Warning</button>
<button type="button" class="btn btn-outline-info" data-mdb-ripple-init data-mdb-ripple-color="dark">Info</button>
<button type="button" class="btn btn-outline-light" data-mdb-ripple-init data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-outline-dark" data-mdb-ripple-init data-mdb-ripple-color="dark">Dark</button>>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Rounded

<button type="button" class="btn btn-primary btn-rounded" data-mdb-ripple-init>Primary</button>
<button type="button" class="btn btn-secondary btn-rounded" data-mdb-ripple-init>Secondary</button>
<button type="button" class="btn btn-success btn-rounded" data-mdb-ripple-init>Success</button>
<button type="button" class="btn btn-danger btn-rounded" data-mdb-ripple-init>Danger</button>
<button type="button" class="btn btn-warning btn-rounded" data-mdb-ripple-init>Warning</button>
<button type="button" class="btn btn-info btn-rounded" data-mdb-ripple-init>Info</button>
<button type="button" class="btn btn-light btn-rounded" data-mdb-ripple-init>Light</button>
<button type="button" class="btn btn-dark btn-rounded" data-mdb-ripple-init>Dark</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Rounded outline

<button type="button" class="btn btn-outline-primary btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Primary</button>
<button type="button" class="btn btn-outline-secondary btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Secondary</button>
<button type="button" class="btn btn-outline-success btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Success</button>
<button type="button" class="btn btn-outline-danger btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Danger</button>
<button type="button" class="btn btn-outline-warning btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Warning</button>
<button type="button" class="btn btn-outline-info btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Info</button>
<button type="button" class="btn btn-outline-light btn-rounded" data-mdb-ripple-init data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-outline-dark btn-rounded" data-mdb-ripple-init  data-mdb-ripple-color="dark">Dark</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Floating

<button type="button" class="btn btn-primary btn-floating" data-mdb-ripple-init>
  <i class="fas fa-download"></i>
</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Fixed buttons 

<div class="fixed-action-btn" data-mdb-button-init data-mdb-ripple-init>
  <a class="btn btn-floating text-white btn-lg" data-mdb-ripple-init style="background-color: #f44336;">
    <i class="fas fa-pencil-alt"></i>
  </a>

  <ul class="list-unstyled">
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #f44336;">
        <i class="fas fa-star"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #fdd835;">
        <i class="fas fa-user"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #4caf50;">
        <i class="fas fa-envelope"></i>
      </a>
    </li>
    <li>
      <a class="btn text-white btn-floating btn-lg" data-mdb-ripple-init style="background-color: #2196f3;">
        <i class="fas fa-shopping-cart"></i>
      </a>
    </li>
  </ul>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Social 

<a class="btn text-white" data-mdb-ripple-init style="background-color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f"></i>
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Sample brands 

<!-- Facebook -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #3b5998;" href="#!" role="button">
  <i class="fab fa-facebook-f"></i>
</a>

<!-- Twitter -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #55acee;" href="#!" role="button">
  <i class="fab fa-twitter"></i>
</a>

<!-- Google -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #dd4b39;" href="#!" role="button">
  <i class="fab fa-google"></i>
</a>

<!-- Instagram -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ac2bac;" href="#!" role="button">
  <i class="fab fa-instagram"></i>
</a>

<!-- Linkedin -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #0082ca;" href="#!" role="button">
  <i class="fab fa-linkedin-in"></i>
</a>

<!-- Pinterest -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #c61118;" href="#!" role="button">
  <i class="fab fa-pinterest"></i>
</a>

<!-- Vkontakte -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #4c75a3;" href="#!" role="button">
  <i class="fab fa-vk"></i>
</a>

<!-- Stack overflow -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ffac44;" href="#!" role="button">
  <i class="fab fa-stack-overflow"></i>
</a>

<!-- Youtube -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ed302f;" href="#!" role="button">
  <i class="fab fa-youtube"></i>
</a>

<!-- Slack -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #481449;" href="#!" role="button">
  <i class="fab fa-slack-hash"></i>
</a>

<!-- Github -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #333333;" href="#!" role="button">
  <i class="fab fa-github"></i>
</a>

<!-- Dribbble -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ec4a89;" href="#!" role="button">
  <i class="fab fa-dribbble"></i>
</a>

<!-- Reddit -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #ff4500;" href="#!" role="button">
  <i class="fab fa-reddit-alien"></i>
</a>

<!-- Whatsapp -->
<a class="btn text-white" data-mdb-ripple-init style="background-color: #25d366;" href="#!" role="button">
  <i class="fab fa-whatsapp"></i>
</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Tags 

<a class="btn btn-primary" data-mdb-ripple-init href="#" role="button">Link</a>
<button class="btn btn-primary" data-mdb-ripple-init type="submit">Button</button>
<input class="btn btn-primary" data-mdb-ripple-init type="button" value="Input" />
<input class="btn btn-primary" data-mdb-ripple-init type="submit" value="Submit" />
<input class="btn btn-primary" data-mdb-ripple-init type="reset" value="Reset" />
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Sizes 

<button type="button" class="btn btn-primary btn-sm" data-mdb-ripple-init>Button</button>
<button type="button" class="btn btn-primary" data-mdb-ripple-init>Button</button>
<button type="button" class="btn btn-primary btn-lg" data-mdb-ripple-init>Button</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Active state 

<a href="#" class="btn btn-primary btn-lg active" data-mdb-ripple-init role="button" aria-pressed="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg active" data-mdb-ripple-init role="button" aria-pressed="true">Link</a>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Disabled state 

<button type="button" class="btn btn-primary btn-lg" data-mdb-ripple-init disabled>Primary button</button>
<button type="button" class="btn btn-secondary btn-lg" data-mdb-ripple-init disabled>Button</button>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

Block buttons 

<div class="d-grid gap-2">
  <button class="btn btn-primary" type="button" data-mdb-ripple-init>Button</button>
  <button class="btn btn-primary" type="button" data-mdb-ripple-init>Button</button>
</div>
// Initialization for ES Users
import { Ripple, initMDB } from "mdb-ui-kit";

initMDB({ Ripple });

About

Responsive buttons built using Bootstrap 5. Many predefined button style classes: link, outline, round button, social, floating, fixed and more

mdbootstrap.com/docs/standard/components/buttons/

Topics

bootstrap material-design buttons buttons-collection bootstrap5

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published