<a class="button button-xl button-radius button-gray" href="#">X Large</a>
<a class="button button-lg button-radius button-gray" href="#">Large</a>
<a class="button button-md button-radius button-gray" href="#">Medium</a>
<a class="button button-sm button-radius button-gray" href="#">Small</a>
<a class="button button-gray button-md button-radius" href="#">gray</a>
<a class="button button-dark button-md button-radius" href="#">Dark</a>
<a class="button button-outline-gray button-md button-radius" href="#">Outline gray</a>
<a class="button button-outline-dark button-md button-radius" href="#">Outline Dark</a>
<a class="button button-md button-radius button-blue" href="#">Blue</a>
<a class="button button-md button-radius button-purple" href="#">Purple</a>
<a class="button button-md button-radius button-pink-edge" href="#">Pink Edge</a>
<a class="button button-md button-radius button-golden-yellow" href="#">Golden Yellow</a>
<a class="button button-md button-radius button-very-peri" href="#">Very Peri</a>
<a class="button button-md button-radius button-turquiose" href="#">Turquiose</a>
<a class="button button-md button-radius button-spring-red" href="#">Spring Red</a>
<a class="button button-md button-radius button-gradient-1" href="#">Gradient 1</a>
<a class="button button-md button-radius button-gradient-2" href="#">Gradient 2</a>
<a class="button button-md button-radius button-gradient-3" href="#">Gradient 3</a>
<a class="button button-md button-radius button-gradient-4" href="#">Gradient 4</a>
<a class="button button-md button-radius button-gradient-5" href="#">Gradient 5</a>
<a class="button button-md button-radius button-gradient-6" href="#">Gradient 6</a>
<a class="button button-md button-radius button-white" href="#">White 1</a>
<a class="button button-md button-radius button-white-2" href="#">White 2</a>
<a class="button button-md button-radius button-outline-white" href="#">Outline White 1</a>
<a class="button button-md button-radius button-outline-white-2" href="#">Outline White 2</a>
<a class="button button-md button-reveal-left-gray me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>gray Left</span></a>
<a class="button button-md button-reveal-right-gray me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>gray Right</span></a>
<a class="button button-md button-reveal-left-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Left</span></a>
<a class="button button-md button-reveal-right-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Dark Right</span></a>
<br>
<a class="button button-md button-reveal-left-outline-gray me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline gray Left</span></a>
<a class="button button-md button-reveal-right-outline-gray me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline gray Right</span></a>
<a class="button button-md button-reveal-left-outline-dark me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Left</span></a>
<a class="button button-md button-reveal-right-outline-dark mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Outline Right</span></a>
<a class="button button-md button-reveal-left-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
<a class="button button-md button-reveal-right-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>
<a class="button button-md button-reveal-left-outline-white me-2 mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Left</span></a>
<a class="button button-md button-reveal-right-outline-white mb-2" href="#"><i class="bi bi-arrow-right"></i><span>Reveal Right</span></a>
<a class="button button-md button-fancy-1" href="#">Fancy 1</a>
<a class="button button-md button-fancy-1-outline" href="#">Fancy Outline gray 1</a>
<a class="button button-md button-fancy-1-outline-dark" href="#">Fancy Outline Dark 1</a>
<a class="button button-md button-fancy-2" href="#">Fancy 2</a>
<a class="button button-md button-fancy-2-outline" href="#">Fancy Outline 2</a>
<a class="button button-md button-fancy-1-white" href="#">Fancy White 1</a>
<a class="button button-md button-fancy-1-outline-white" href="#">Fancy Outline White 1</a>
<a class="button button-md button-fancy-2-white" href="#">Fancy White 2</a>
<a class="button button-md button-fancy-2-outline-white" href="#">Fancy Outline WHite 2</a>
<a class="button button-md button-radius button-gray button-hover-float" href="#">Hover Float</a>
<a class="button button-md button-radius button-gray button-hover-scale" href="#">Hover Scale</a>
<a class="button button-md button-radius button-gray button-hover-shrink" href="#">Hover Shrink</a>
<a class="button button-lg button-radius button-white button-shadow" href="#">Shadow</a>
<a class="button-text-1" href="#">Text Button 1</a>
<a class="button-text-2" href="#">Text Button 2</a>
<a class="button-text-3" href="#">Text Button 3</a>
<a class="button-circle button-circle-xl button-circle-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-lg button-circle-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-sm button-circle-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-dark" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-gray" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-dark" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-blue" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-purple" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-pink-edge" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-golden-yellow" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-very-peri" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-turquiose" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-spring-red" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-1" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-2" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-3" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-4" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-5" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gradient-6" href="#"> <i class="bi bi-star-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-white" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-white-2" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-white" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-white-2" href="#"> <i class="bi bi-heart-fill"></i>
</a>
<a class="button-circle button-circle-md button-circle-gray button-circle-hover-slide" href="#"> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-md button-circle-dark button-circle-hover-slide" href="#"> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-gray button-circle-hover-slide" href="#"> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-gray button-circle-hover-slide" href="#"> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</a>
<a class="button-circle button-circle-md button-circle-outline-dark button-circle-hover-slide" href="#"> <i class="fas fa-heart"></i> <i class="fas fa-heart"></i>
</a>