Buttons

All modular elements can be readily used and customized in every layout across pages.

Buttons Colors

Posh use .btn class for default button style. Customize the color of a button using .btn-* and .btn-outline-*. You can use the following classes.

For detail documentation,View Buttons on Bootstrap ⟶

Solid Buttons

.btn-primary .btn-secondary .btn-success .btn-info .btn-warning .btn-danger .btn-light .btn-dark

<a class="mb-3 me-3 btn btn-primary" href="#!">.btn-primary</a>
<a class="mb-3 me-3 btn btn-secondary" href="#!">.btn-secondary</a>
<a class="mb-3 me-3 btn btn-success" href="#!">.btn-success</a>
<a class="mb-3 me-3 btn btn-info" href="#!">.btn-info</a>
<a class="mb-3 me-3 btn btn-warning" href="#!">.btn-warning</a>
<a class="mb-3 me-3 btn btn-danger" href="#!">.btn-danger</a>
<a class="mb-3 me-3 btn btn-light" href="#!">.btn-light</a>
<a class="mb-3 me-3 btn btn-dark" href="#!">.btn-dark</a>

Outline Buttons

.btn-outline-primary .btn-outline-secondary .btn-outline-success .btn-outline-info .btn-outline-warning .btn-outline-danger .btn-outline-light .btn-outline-dark

<a class="mb-3 me-3 btn btn-outline-primary" href="#!">.btn-outline-primary</a>
<a class="mb-3 me-3 btn btn-outline-secondary" href="#!">.btn-outline-secondary</a>
<a class="mb-3 me-3 btn btn-outline-success" href="#!">.btn-outline-success</a>
<a class="mb-3 me-3 btn btn-outline-info" href="#!">.btn-outline-info</a>
<a class="mb-3 me-3 btn btn-outline-warning" href="#!">.btn-outline-warning</a>
<a class="mb-3 me-3 btn btn-outline-danger" href="#!">.btn-outline-danger</a>
<a class="mb-3 me-3 btn btn-outline-light" href="#!">.btn-outline-light</a>
<a class="mb-3 me-3 btn btn-outline-dark" href="#!">.btn-outline-dark</a>

Inverted Buttons

.btn-white .btn-outline-white

<div class="p-3 bg-1100">
  <a class="btn btn-white me-3" href="#!">.btn-white</a>
  <a class="btn btn-outline-white" href="#!"> .btn-outline-white </a>
</div>

Buttons Sizes

Customize the size of a button using .btn-xs,.btn-sm and .btn-lg

.btn-xs .btn-sm .btn .btn-lg

<a class="btn btn-outline-primary btn-xs me-3 mb-3" href="#!">.btn-xs</a>
<a class="btn btn-outline-primary btn-sm me-3 mb-3" href="#!">.btn-sm</a>
<a class="btn btn-outline-primary me-3 mb-3" href="#!">.btn</a>
<a class="btn btn-outline-primary btn-lg mb-3" href="#!">.btn-lg </a>

Buttons Shapes

Customize the shape of a button using .btn and .btn-capsule

.btn .btn-capsule

 <a href="#!" class="btn btn-primary">.btn</a>
 <a href="#!" class="btn btn-primary rounded-capsule">.btn-capsule</a>

Buttons With Icon

Use .btn-icon-left or .btn-icon-right class for the icon position. For outline button, use .btn-outline-* . To make capsule like button, you can use .rounded-capsule class.

.btn-icon .btn-icon .btn-icon .btn-icon .btn-icon .btn-icon .btn-icon .btn-icon

<a class="btn btn-icon btn-primary btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-primary btn-icon-right me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-outline-primary btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-outline-primary btn-icon-right me-3 mb-3" href="#!">
  <span class="btn-brand"><i class="fab fa-gitlab"></i></span>.btn-icon
</a>
<a class="btn btn-icon btn-primary btn-icon-left rounded-capsule me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-primary btn-icon-right rounded-capsule me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-outline-primary btn-icon-left rounded-capsule me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-gitlab"> </i></span>.btn-icon
</a>
<a class="btn btn-icon btn-outline-primary btn-icon-right rounded-capsule mb-3" href="#!">
  <span class="btn-brand"><i class="fab fa-gitlab"> </i></span>.btn-icon
</a>

Special Buttons

You can use the classes .facebook,.twitter .google-plus .github etc. to color buttons with their corresponding brand colors.

Join facebook Join Twitter Join Google+ See Github

<a class="btn btn-icon facebook btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-facebook-f"> </i></span>Join facebook
</a>
<a class="btn btn-icon twitter btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-twitter"> </i></span>Join Twitter
</a>
<a class="btn btn-icon google-plus btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-google-plus-g"> </i></span>Join Google+
</a>
<a class="btn btn-icon github btn-icon-left me-3 mb-3" href="#!">
  <span class="btn-brand"> <i class="fab fa-github"> </i></span>See Github
</a>

Play Buttons

Button Group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in.btn-group

<div class="btn-group btn-group-vertical" role="group"> <button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light</button></div>

Button Group

Group a series of buttons together on a single line with the button group. Wrap a series of buttons with .btn in.btn-group

<div class="btn-group" role="group"> <button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light </button><button class="btn btn-outline-light"> .btn-outline-light</button></div>