Buttons

Colors

Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button
Button Button Button Button Button Button Button Button Button Button Button Button Button Button Button

View example's code

<a href="#" class="btn btn-yellow rounded-pill">Button</a>
<a href="#" class="btn btn-orange rounded-pill">Button</a>
<a href="#" class="btn btn-red rounded-pill">Button</a>
<a href="#" class="btn btn-pink rounded-pill">Button</a>
<a href="#" class="btn btn-violet rounded-pill">Button</a>
<a href="#" class="btn btn-purple rounded-pill">Button</a>
<a href="#" class="btn btn-blue rounded-pill">Button</a>
<a href="#" class="btn btn-aqua rounded-pill">Button</a>
<a href="#" class="btn btn-green rounded-pill">Button</a>
<a href="#" class="btn btn-leaf rounded-pill">Button</a>
<a href="#" class="btn btn-navy rounded-pill">Button</a>
<a href="#" class="btn btn-fuchsia rounded-pill">Button</a>
<a href="#" class="btn btn-sky rounded-pill">Button</a>
<a href="#" class="btn btn-grape rounded-pill">Button</a>
<a href="#" class="btn btn-ash rounded-pill">Button</a>

<a href="#" class="btn btn-primary rounded-pill">Button</a>
<a href="#" class="btn btn-white rounded-pill">Button</a>
										
<a href="#" class="btn btn-soft-yellow rounded-pill">Button</a>
<a href="#" class="btn btn-soft-orange rounded-pill">Button</a>
<a href="#" class="btn btn-soft-red rounded-pill">Button</a>
<a href="#" class="btn btn-soft-pink rounded-pill">Button</a>
<a href="#" class="btn btn-soft-violet rounded-pill">Button</a>
<a href="#" class="btn btn-soft-purple rounded-pill">Button</a>
<a href="#" class="btn btn-soft-blue rounded-pill">Button</a>
<a href="#" class="btn btn-soft-aqua rounded-pill">Button</a>
<a href="#" class="btn btn-soft-green rounded-pill">Button</a>
<a href="#" class="btn btn-soft-leaf rounded-pill">Button</a>
<a href="#" class="btn btn-soft-fuchsia rounded-pill">Button</a>
<a href="#" class="btn btn-soft-sky rounded-pill">Button</a>
<a href="#" class="btn btn-soft-grape rounded-pill">Button</a>
<a href="#" class="btn btn-soft-dark rounded-pill">Button</a>
<a href="#" class="btn btn-soft-ash rounded-pill">Button</a>

Gradients

Button Button Button Button Button Button Button
Button Button Button Button Button Button Button

View example's code

<a href="#" class="btn btn-gradient gradient-1 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-2 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-3 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-4 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-5 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-6 rounded-pill">Text</a>
<a href="#" class="btn btn-gradient gradient-7 rounded-pill">Text</a>
	
<a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-2 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-3 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-4 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-5 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-6 rounded-pill"><span>Text</span></a>
<a href="#" class="btn btn-outline-gradient gradient-7 rounded-pill"><span>Text</span></a>

Sizes

Large Button Default Button Small Button

View example's code

<a href="#" class="btn btn-primary btn-lg rounded-pill">Large Button</a> 
<a href="#" class="btn btn-primary rounded-pill">Default Button</a> 
<a href="#" class="btn btn-primary btn-sm rounded-pill">Small Button</a>

Shapes

Square Rounded Rounder Pill

View example's code

<a href="#" class="btn btn-primary rounded-0">Square</a>
<a href="#" class="btn btn-primary">Rounded</a>
<a href="#" class="btn btn-primary rounded-xl">Rounder</a>
<a href="#" class="btn btn-primary rounded-pill">Pill</a>

Style

Solid Soft Outline Gradient Outline Gradient

View example's code

<a href="#" class="btn btn-primary rounded-pill">Solid</a>
<a href="#" class="btn btn-soft-primary rounded-pill">Soft</a>
<a href="#" class="btn btn-outline-primary rounded-pill">Outline</a>
<a href="#" class="btn btn-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0">Gradient</a>
<a href="#" class="btn btn-outline-gradient gradient-1 rounded-pill me-1 mb-2 mb-md-0"><span>Outline Gradient</span></a>

Circle

View example's code

<a href="#" class="btn btn-circle btn-primary btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-primary btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-soft-primary btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-outline-primary btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-outline-primary"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-outline-primary btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-gradient gradient-1 btn-lg"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-gradient gradient-1"><i class="uil uil-check"></i></a>
<a href="#" class="btn btn-circle btn-gradient gradient-1 btn-sm"><i class="uil uil-check"></i></a>

<a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-lg"><span><i class="uil uil-check"></i></span></a>
<a href="#" class="btn btn-circle btn-outline-gradient gradient-1"><span><i class="uil uil-check"></i></span></a>
<a href="#" class="btn btn-circle btn-outline-gradient gradient-1 btn-sm"><span><i class="uil uil-check"></i></span></a>

Social

View example's code

<nav class="nav social">
	<a href="#" class="btn btn-circle btn-sm btn-twitter">
		<i class="uil uil-twitter"></i>
	</a>
	<a href="#" class="btn btn-circle btn-sm btn-facebook">
		<i class="uil uil-facebook-f"></i>
	</a>
	<a href="#" class="btn btn-circle btn-sm btn-dribbble">
		<i class="uil uil-dribbble"></i>
	</a>
</nav>
										
<nav class="nav social social-muted">
	<a href="#"><i class="uil uil-twitter"></i></a>
	<a href="#"><i class="uil uil-facebook-f"></i></a>
	<a href="#"><i class="uil uil-dribbble"></i></a>
</nav>
										
<nav class="nav social">
	<a href="#"><i class="uil uil-twitter"></i></a>
	<a href="#"><i class="uil uil-facebook-f"></i></a>
	<a href="#"><i class="uil uil-dribbble"></i></a>
</nav>

Icon

App Store Google Play

View example's code

<a class="btn btn-primary btn-icon btn-icon-start rounded">
 <i class="uil uil-apple"></i> App Store
</a>

<a class="btn btn-primary btn-icon btn-icon-end rounded">
 Google Play <i class="uil uil-google-play"></i>
</a>

Expand

Learn More
Learn More

View example's code

<a href="#" class="btn btn-expand btn-primary rounded-pill">
	<i class="uil uil-arrow-right"></i>
	<span>Learn More</span>
</a>

<a href="#" class="btn btn-expand btn-soft-primary rounded-pill">
	<i class="uil uil-arrow-right"></i>
	<span>Learn More</span>
</a>

Play

View example's code

<a href="#" class="btn btn-circle btn-primary btn-play ripple">
	<i class="icn-caret-right"></i>
</a>
	
<a href="#" class="btn btn-circle btn-soft-primary btn-play ripple">
	<i class="icn-caret-right"></i>
</a>

Project Pages

Single Projects

Usage

Styleguide

Elements

Buttons

Colors

Gradients

Sizes

Shapes

Style

Circle

Social

Icon

Expand

Play