Buttons

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

Buttons Colors

Slick uses .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-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-danger">.btn-outline-danger</a>
<a href="#" class="btn btn-outline-dark">.btn-outline-dark</a>

Buttons hover effect

Use the following classes with .btn-outline-* classes.

Classes:

.hvr-sweep-right
.hvr-sweep-left
.hvr-sweep-top
.hvr-sweep-bottom
.hvr-sweep-collapseX
.hvr-sweep-collapseY

Inverted Buttons

.btn-white .btn-outline-white .btn-outline-warning

<a href="#" class="btn btn-white">.btn-white</a>
<a href="#" class="btn btn-outline-white">btn-outline-white</a>
<a href="#" class="btn btn-outline-warning">.btn-outline-warning</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

<a class="btn btn-icon btn-primary btn-icon-left" href="#">
	<span class="mr-3">
		<div class="fab fa-gitlab"></div>
	</span>
	.btn-icon
</a>

Special Buttons

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

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>