# 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.

##### Solid Buttons

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

    <a href="#" class="btn btn-secondary">.btn-secondary</a>
    <a href="#" class="btn btn-primary">.btn-primary</a>
    <a href="#" class="btn btn-info">btn-info</a>
    <a href="#" class="btn btn-success">.btn-success</a>
    <a href="#" class="btn btn-warning">.btn-warning</a>
    <a href="#" class="btn btn-danger">.btn-danger</a>
    <a href="#" class="btn btn-dark">.btn-dark</a>

##### Outline Buttons

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

    <a href="#" class="btn btn-outline-primary">.btn-outline-primary</a>
    <a href="#" class="btn btn-outline-info">btn-outline-info</a>
    <a href="#" class="btn btn-outline-success">.btn-outline-success</a>
    <a href="#" class="btn btn-outline-warning">.btn-outline-warning</a>
    <a href="#" class="btn btn-outline-danger">.btn-outline-danger</a>
    <a href="#" class="btn btn-outline-dark">.btn-outline-dark</a>

##### Inverted Buttons

.btn-white .btn-outline-white

    <a href="#" class="btn btn-white">.btn-white</a>
    <a href="#" class="btn btn-outline-white">btn-outline-white</a>

#### 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" href="#">.btn-xs</a>
    <a class="btn btn-outline-primary btn-sm" href="#">.btn-sm</a>
    <a class="btn btn-outline-primary" href="#">.btn</a>
    <a class="btn btn-outline-primary btn-lg" 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 btn-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`.btn-capsule` class.

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

    <a href="#" class="btn btn-icon btn-primary btn-icon-left">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-primary btn-icon-right">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-outline-primary btn-icon-left">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-outline-primary btn-icon-right">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-primary btn-icon-left btn-capsule">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-primary btn-icon-right btn-capsule">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-outline-primary btn-icon-left btn-capsule">
    	<span class="fa fa-gitlab">
    	</span> .btn-icon
    </a>
    <a href="#" class="btn btn-icon btn-outline-primary btn-icon-right btn-capsule">
    	<span class="fa fa-gitlab">
    	</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 href="#" class="btn btn-icon facebook btn-icon-left">
    	<span class="fa fa-facebook"></span> Join facebook
    </a>
    <a href="#" class="btn btn-icon twitter btn-icon-left">
    	<span class="fa fa-twitter"></span>	Join Twitter
    </a>
    <a href="#" class="btn btn-icon google-plus btn-icon-left">
    	<span class="fa fa-google-plus"></span>	Join Google+
    </a>
    <a href="#" class="btn btn-icon github btn-icon-left">
    	<span class="fa fa-github"></span> See Github
    </a>

##### Play Buttons

#### Buttons 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">
    	<button class="btn btn-secondary">.btn-secondary</button>
    	<button class="btn btn-secondary">.btn-secondary</button>
    	<button class="btn btn-secondary">.btn-secondary</button>
    </div>

##### Jump into