GLassmorp - Tailwind Dashboard Glassmorpism

Button

Trigger actions and navigate through your interface with versatile, customizable buttons designed to suit various use cases.

Button Variant

                  
<!-- Primary Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-purple-400 to-purple-600/90 hover:from-purple-400 hover:to-purple-600 focus:from-purple-400 focus:to-purple-600 focus:ring-0 rounded">
  Primary
</button>
<!-- Success Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-green-400 to-green-600/90 hover:from-green-400 hover:to-green-600 focus:from-green-400 focus:to-green-600 focus:ring-0 rounded">
  Success
</button>
<!-- Info Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-sky-400 to-sky-600/90 hover:from-sky-400 hover:to-sky-600 focus:from-sky-400 focus:to-sky-600 focus:ring-0 rounded">
  Info
</button>
<!-- Danger Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-red-400 to-red-600/90 hover:from-red-400 hover:to-red-600 focus:from-red-400 focus:to-red-600 focus:ring-0 rounded">
  Danger
</button>
<!-- Warning Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-yellow-400 to-yellow-600/90 hover:from-yellow-400 hover:to-yellow-600 focus:from-yellow-400 focus:to-yellow-600 focus:ring-0 rounded">
  Warning
</button>
<!-- Icon -->
<button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-gradient-to-b from-yellow-400 to-yellow-600/90 hover:from-yellow-400 hover:to-yellow-600 focus:from-yellow-400 focus:to-yellow-600 focus:ring-0 rounded">
  <i class="bi bi-person text-lg"></i>
</button>


<!-- Primary Outlined Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-purple-600 font-medium border border-purple-600 bg-transparent dark:text-purple-300 dark:border-purple-300 hover:bg-purple-600 hover:text-white focus:bg-purple-600 focus:text-white focus:ring-0 rounded">
  Primary
</button>
<!-- Success Outlined Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-green-600 font-medium border border-green-600 bg-transparent dark:text-green-300 dark:border-green-300 hover:bg-green-600 hover:text-white focus:bg-green-600 focus:text-white focus:ring-0 rounded">
  Success
</button>
<!-- Info Outlined Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-sky-600 font-medium border border-sky-600 bg-transparent dark:text-sky-300 dark:border-sky-300 hover:bg-sky-600 hover:text-white focus:bg-sky-600 focus:text-white focus:ring-0 rounded">
  Info
</button>
<!-- Danger Outlined Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-red-600 font-medium border border-red-600 bg-transparent dark:text-red-300 dark:border-red-300 hover:bg-red-600 hover:text-white focus:bg-red-600 focus:text-white focus:ring-0 rounded">
  Danger
</button>
<!-- Warning Outlined Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-600 font-medium border border-yellow-600 bg-transparent dark:text-yellow-300 dark:border-yellow-300 hover:bg-yellow-600 hover:text-white focus:bg-yellow-600 focus:text-white focus:ring-0 rounded">
  Warning
</button>
<!-- icon -->
<button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-600 font-medium border border-yellow-600 bg-transparent dark:text-yellow-300 dark:border-yellow-300 hover:bg-yellow-600 hover:text-white focus:bg-yellow-600 focus:text-white focus:ring-0 rounded">
  <i class="bi bi-person text-lg"></i>
</button>


<!-- Primary Filled Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Primary
</button>
<!-- Success Filled Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-green-600 hover:bg-green-700 focus:bg-green-700 focus:ring-0 rounded">
  Success
</button>
<!-- Info Filled Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-sky-600 hover:bg-sky-700 focus:bg-sky-700 focus:ring-0 rounded">
  Info
</button>
<!-- Danger Filled Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-red-600 hover:bg-red-700 focus:bg-red-700 focus:ring-0 rounded">
  Danger
</button>
<!-- Warning Filled Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-yellow-600 hover:bg-yellow-700 focus:bg-yellow-700 focus:ring-0 rounded">
  Warning
</button>
<!-- icon -->
<button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-yellow-600 hover:bg-yellow-700 focus:bg-yellow-700 focus:ring-0 rounded">
  <i class="bi bi-person text-lg"></i>
</button>


<!-- Primary Soft Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-purple-700 font-medium bg-purple-100 hover:bg-purple-200 focus:bg-purple-200 focus:ring-0 rounded">
  Primary
</button>
<!-- Success Soft Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-green-700 font-medium bg-green-100 hover:bg-green-200 focus:bg-green-200 focus:ring-0 rounded">
  Success
</button>
<!-- Info Soft Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-sky-700 font-medium bg-sky-100 hover:bg-sky-200 focus:bg-sky-200 focus:ring-0 rounded">
  Info
</button>
<!-- Danger Soft Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-red-700 font-medium bg-red-100 hover:bg-red-200 focus:bg-red-200 focus:ring-0 rounded">
  Danger
</button>
<!-- Warning Soft Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-700 font-medium bg-yellow-100 hover:bg-yellow-200 focus:bg-yellow-200 focus:ring-0 rounded">
  Warning
</button>
<!-- icon -->
<button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-700 font-medium bg-yellow-100 hover:bg-yellow-200 focus:bg-yellow-200 focus:ring-0 rounded">
  <i class="bi bi-person text-lg"></i>
</button>


<!-- Primary Glass Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-purple-600 dark:text-purple-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-purple-300/30 focus:bg-purple-300/30">
  Primary
</button>
<!-- Success Glass Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-green-600 dark:text-green-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-green-300/30 focus:bg-green-300/30">
  Success
</button>
<!-- Info Glass Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-sky-600 dark:text-sky-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-sky-300/30 focus:bg-sky-300/30">
  Info
</button>
<!-- Danger Glass Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-red-600 dark:text-red-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-red-300/30 focus:bg-red-300/30">
  Danger
</button>
<!-- Warning Glass Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-600 dark:text-yellow-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-yellow-300/30 focus:bg-yellow-300/30">
  Warning
</button>
<!-- icon -->
<button class="size-10 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-yellow-600 dark:text-yellow-200 font-medium rounded backdrop-opacity-95 backdrop-blur backdrop-saturate-150 bg-white/20 dark:bg-neutral-400/40 border border-white/80 dark:border-white/40 shadow hover:bg-yellow-300/30 focus:bg-yellow-300/30">
  <i class="bi bi-person text-lg"></i>
</button>

Button Option

                  
<!-- Small Primary Button -->
<button class="text-sm py-1.5 uajskeiolksb inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Small
</button>
<!-- Medium Primary Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Medium
</button>
<!-- Large Primary Button -->
<button class="text-lg py-3 maksueyropls inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Large
</button>


<!-- Rounded Primary Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Rounded
</button>
<!-- Circle Primary Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
  Circle
</button>
<!-- Square Primary Button -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0">
  Square
</button>


<!-- Button with Icon -->
<button class="py-2 dkslaoeyhnmj inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  Button with Icon <i class="bi bi-person text-lg"></i>
</button>


<!-- Rounded Icon Button -->
<button class="size-12 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 rounded">
  <i class="bi bi-person text-lg"></i>
</button>
<!-- Circle Icon Button -->
<button class="size-12 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0 boalstehwqbj">
  <i class="bi bi-person text-lg"></i>
</button>
<!-- Square Icon Button -->
<button class="size-12 inline-flex layhetgsjdcb yhansklopals gap-2.5 text-white font-medium bg-purple-600 hover:bg-purple-700 focus:bg-purple-700 focus:ring-0">
  <i class="bi bi-person text-lg"></i>
</button>