Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Examples

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

<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>, <a> and <input>element.

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

Outline buttons

In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the .btn-outline-* ones 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-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Soft buttons

Replace the default modifier classes with the .btn-soft-* to get cool soft buttons 

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

Sizes

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

 <button type="button" class="btn btn-xs btn-primary">Extra small</button>
<button type="button" class="btn btn-sm btn-secondary">Small</button>
<button type="button" class="btn btn-success">Default</button>
<button type="button" class="btn btn-lg btn-warning">Large</button>
<button type="button" class="btn btn-xl btn-danger">Extra large</button>

Icon buttons

With the help of .iconbox utility class make icon buttons with different sizes. 

<button class="btn btn-primary iconbox iconbox-xs"><i class="fas fa-user-alt"></i></button>
<button class="btn btn-secondary iconbox"><i class="fas fa-check"></i></button>
<button class="btn btn-success iconbox iconbox-lg"><i class="fas fa-trash-alt"></i></button>
<button class="btn btn-danger iconbox iconbox-xl"><i class="fas fa-arrow-right"></i></button>
<button class="btn btn-primary iconbox iconbox-xs rounded"><i class="fas fa-user-alt"></i></button>
<button class="btn btn-secondary iconbox rounded"><i class="fas fa-check"></i></button>
<button class="btn btn-success iconbox iconbox-lg rounded"><i class="fas fa-trash-alt"></i></button>
<button class="btn btn-danger iconbox iconbox-xl rounded"><i class="fas fa-arrow-right"></i></button>

Social buttons

Make rich social buttons With the help of .iconbox utility class. 

<button class="btn btn-facebook mr-1 mb-2">
  <i class="fab fa-facebook-f mr-1"></i>
  <span>Share <small>768M</small></span>
</button>

<button class="btn btn-twitter mr-1 mb-2">
  <i class="fab fa-twitter mr-1"></i>
  <span>Tweet <small>89k</small></span>
</button>

<button class="btn btn-linkedin mr-1 mb-2">
  <i class="fab fa-linkedin-in mr-1"></i>
  <span>Linkedin <small>328k</small></span>
</button>

<button class="btn btn-pinterest mr-1 mb-2">
  <i class="fab fa-pinterest mr-1"></i>
  <span>Pint it</span>
</button>

<button class="btn btn-youtube mr-1 mb-2">
  <i class="fab fa-youtube mr-1"></i>
  <span>View on youtube</span>
</button>

<button class="btn btn-instagram mr-1 mb-2">
  <i class="fab fa-instagram mr-1"></i>
  <span>Follow us</span>
</button>

<button class="btn btn-github mr-1 mb-2">
  <i class="fab fa-github mr-1"></i>
  <span>Fork us</span>
</button>
<button class="btn btn-outline-facebook mr-1 mb-2">
  <i class="fab fa-facebook-f mr-1"></i>
  <span>Share <small>768M</small></span>
</button>

<button class="btn btn-outline-twitter mr-1 mb-2">
  <i class="fab fa-twitter mr-1"></i>
  <span>Tweet <small>89k</small></span>
</button>

<button class="btn btn-outline-linkedin mr-1 mb-2">
  <i class="fab fa-linkedin-in mr-1"></i>
  <span>Linkedin <small>328k</small></span>
</button>

<button class="btn btn-outline-pinterest mr-1 mb-2">
  <i class="fab fa-pinterest mr-1"></i>
  <span>Pint it</span>
</button>

<button class="btn btn-outline-youtube mr-1 mb-2">
  <i class="fab fa-youtube mr-1"></i>
  <span>View on youtube</span>
</button>

<button class="btn btn-outline-instagram mr-1 mb-2">
  <i class="fab fa-instagram mr-1"></i>
  <span>Follow us</span>
</button>

<button class="btn btn-outline-github mr-1 mb-2">
  <i class="fab fa-github mr-1"></i>
  <span>Fork us</span>
</button>

Social buttons with icon

 <button class="btn btn-facebook iconbox rounded mr-1">
  <i class="fab fa-facebook-f"></i>
</button>
<button class="btn btn-twitter iconbox rounded mr-1">
  <i class="fab fa-twitter"></i>
</button>
<button class="btn btn-linkedin iconbox rounded mr-1">
  <i class="fab fa-linkedin-in"></i>
</button>
<button class="btn btn-pinterest iconbox rounded mr-1">
  <i class="fab fa-pinterest"></i>
</button>
<button class="btn btn-youtube iconbox rounded mr-1">
  <i class="fab fa-youtube"></i>
</button>
<button class="btn btn-instagram iconbox rounded mr-1">
  <i class="fab fa-instagram"></i>
</button>
<button class="btn btn-github iconbox rounded mr-1">
  <i class="fab fa-github"></i>
</button>
<button class="btn btn-outline-facebook iconbox rounded mr-1">
  <i class="fab fa-facebook-f"></i>
</button>
<button class="btn btn-outline-twitter iconbox rounded mr-1">
  <i class="fab fa-twitter"></i>
</button>
<button class="btn btn-outline-linkedin iconbox rounded mr-1">
  <i class="fab fa-linkedin-in"></i>
</button>
<button class="btn btn-outline-pinterest iconbox rounded mr-1">
  <i class="fab fa-pinterest"></i>
</button>
<button class="btn btn-outline-youtube iconbox rounded mr-1">
  <i class="fab fa-youtube"></i>
</button>
<button class="btn btn-outline-instagram iconbox rounded mr-1">
  <i class="fab fa-instagram"></i>
</button>
<button class="btn btn-outline-github iconbox rounded mr-1">
  <i class="fab fa-github"></i>
</button>
<hr class="border-0">
<button class="btn btn-facebook iconbox mr-1">
  <i class="fab fa-facebook-f"></i>
</button>
<button class="btn btn-twitter iconbox mr-1">
  <i class="fab fa-twitter"></i>
</button>
<button class="btn btn-linkedin iconbox mr-1">
  <i class="fab fa-linkedin-in"></i>
</button>
<button class="btn btn-pinterest iconbox mr-1">
  <i class="fab fa-pinterest"></i>
</button>
<button class="btn btn-youtube iconbox mr-1">
  <i class="fab fa-youtube"></i>
</button>
<button class="btn btn-instagram iconbox mr-1">
  <i class="fab fa-instagram"></i>
</button>
<button class="btn btn-github iconbox mr-1">
  <i class="fab fa-github"></i>
</button>
<button class="btn btn-outline-facebook iconbox mr-1">
  <i class="fab fa-facebook-f"></i>
</button>
<button class="btn btn-outline-twitter iconbox mr-1">
  <i class="fab fa-twitter"></i>
</button>
<button class="btn btn-outline-linkedin iconbox mr-1">
  <i class="fab fa-linkedin-in"></i>
</button>
<button class="btn btn-outline-pinterest iconbox mr-1">
  <i class="fab fa-pinterest"></i>
</button>
<button class="btn btn-outline-youtube iconbox mr-1">
  <i class="fab fa-youtube"></i>
</button>
<button class="btn btn-outline-instagram iconbox mr-1">
  <i class="fab fa-instagram"></i>
</button>
<button class="btn btn-outline-github iconbox mr-1">
  <i class="fab fa-github"></i>
</button>

Buttons Varient

By default buttons are rounded. add utility classes like .rounded-0 for square and .btn-pill for rounded button 

<button type="button" class="btn btn-primary mr-2">Default</button>
<button type="button" class="btn btn-primary rounded-0 mr-2">Square</button>
<button type="button" class="btn btn-primary btn-pill">Btn pill</button>

Hover animation

Add utility class .hover-translate-y for square and .hover-zoom for zoom animation 

<button type="button" class="btn btn-primary hover-zoom mr-2">Zoom</button>
<button type="button" class="btn btn-primary hover-translate">Btn pill</button>