Elements - Buttons

Buttons - Sizes


<a class="button button-dark button-lg" href="#">Button</a>
<a class="button button-dark" href="#">Button</a>
<a class="button button-dark button-sm" href="#">Button</a>
<a class="button button-dark button-xs" href="#">Button</a>

Buttons - Shapes

View Example's Code


<a class="button button-dark" href="#">Button</a>
<a class="button button-dark button-radius" href="#">Button</a>
<a class="button button-dark button-rounded" href="#">Button</a>

Basic Styles

View Example's Code


<a class="button button-rounded" href="#">Default</a>
<a class="button button-rounded button-dark" href="#">Dark</a>
<a class="button button-rounded button-outline" href="#">Outline</a>
<a class="button button-rounded button-outline-dashed" href="#">Dashed</a>

Gradient Styles

View Example's Code


<a class="button button-rounded button-gradient-1" href="#">Gradient 1</a>
<a class="button button-rounded button-gradient-2" href="#">Gradient 2</a>
<a class="button button-rounded button-gradient-3" href="#">Gradient 3</a>
<a class="button button-rounded button-gradient-4" href="#">Gradient 4</a>
<a class="button button-rounded button-gradient-5" href="#">Gradient 5</a>

Hovers

View Example's Code


<a class="button button-rounded button-gradient-1 button-hover-slide" href="#">
	<span data-text="Hover Slide">Hover Slide</span>
</a>
<a class="button button-rounded button-gradient-1 button-hover-float" href="#">
	Hover Float
</a>

Fancy Styles

View Example's Code


<a class="button-fancy" href="#">Fancy Default</a>
<a class="button-fancy-gradient-1" href="#">Fancy Gradient 1</a>
<a class="button-fancy-gradient-2" href="#">Fancy Gradient 2</a>
<a class="button-fancy-gradient-3" href="#">Fancy Gradient 3</a>
<a class="button-fancy-gradient-4" href="#">Fancy Gradient 4</a>
<a class="button-fancy-gradient-5" href="#">Fancy Gradient 5</a>
<a class="button-fancy button-fancy-right" href="#">Fancy Right</a>

Circle Buttons - Sizes

View Example's Code


<a class="button-circle button-circle-dark button-circle-lg" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-circle-dark" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-circle-dark button-circle-sm" href="#">
	<i class="bi bi-star"></i>
</a>

Circle Buttons - Basic Styles

View Example's Code


<a class="button-circle" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-circle-dark" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-circle-outline" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-circle-outline-dashed" href="#">
	<i class="bi bi-star"></i>
</a>

Circle Buttons - Gradient Styles

View Example's Code


<a class="button-circle button-gradient-1" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-gradient-2" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-gradient-3" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-gradient-4" href="#">
	<i class="bi bi-star"></i>
</a>
<a class="button-circle button-gradient-5" href="#">
	<i class="bi bi-star"></i>
</a>

Circle Buttons - Hover

View Example's Code


<a class="button-circle button-gradient-1 button-circle-hover-slide" href="#">
	<i class="bi bi-star"></i>
	<i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-gradient-2 button-circle-hover-slide" href="#">
	<i class="bi bi-star"></i>
	<i class="bi bi-star-fill"></i>
</a>

Nuur