Button
Default Example
<a href="#" class="button button-blue">Primary</a>
<a href="#" class="button button-indigo">Secondary</a>
<a href="#" class="button button-purple">purple</a>
<a href="#" class="button button-purple-light">purple light</a>
<a href="#" class="button button-pink">pink</a>
<a href="#" class="button button-red">red</a>
<a href="#" class="button button-orange">orange</a>
<a href="#" class="button button-yellow">yellow</a>
<a href="#" class="button button-green">green</a>
<a href="#" class="button button-teal">teal</a>
<a href="#" class="button button-cyan">cyan</a>
<a href="#" class="button button-white">white</a>
<a href="#" class="button button-gray">gray</a>
<a href="#" class="button button-gray-dark">gray dark</a>
Icon Buttons example
check Primary
schedule Secondary
delete purple
cancel purple light
redo pink
location_on red
sell orange
save yellow
share green
download teal
add_shopping_cart cyan
bar_chart white
credit_card gray
local_shipping gray dark
<a href="#" class="button button-blue button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">check</i>
Primary
</a>
<a href="#" class="button button-indigo button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">schedule</i>
Secondary</a>
<a href="#" class="button button-purple button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">delete</i>
purple</a>
<a href="#" class="button button-purple-light button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">cancel</i>
purple light</a>
<a href="#" class="button button-pink button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">redo</i>
pink</a>
<a href="#" class="button button-red button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">location_on</i>
red</a>
<a href="#" class="button button-orange button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">sell</i>
orange</a>
<a href="#" class="button button-yellow button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">save</i>
yellow</a>
<a href="#" class="button button-green button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">share</i>
green</a>
<a href="#" class="button button-teal button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">download</i>
teal</a>
<a href="#" class="button button-cyan button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">add_shopping_cart</i>
cyan</a>
<a href="#" class="button button-white button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">bar_chart</i>
white</a>
<a href="#" class="button button-gray button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">credit_card</i>
gray</a>
<a href="#" class="button button-gray-dark button-rounded button-3d">
<i class="font-icon material-symbols-outlined fs-3">local_shipping</i>
gray dark</a>