buttonfabbeginner

Floating Action Button

A Material Design-inspired FAB fixed to the bottom-right corner with a shadow and hover animation.

Preview

<button class="fixed bottom-6 right-6 w-14 h-14 bg-violet-600 text-white rounded-full shadow-lg hover:shadow-2xl hover:scale-110 transition-all duration-200 flex items-center justify-center z-50" aria-label="Add">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
</button>

Color Breakdown

Background

bg-violet-600

#7c3aed

Icon

text-white

#ffffff

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-violet-500 dark:hover:bg-violet-400

Use Cases

Add new itemCompose messageQuick action triggers

Browser Support

All modern browsers.

Related Recipes

Gradient Button

button - beginner

Ghost Button

button - beginner

Pill Button

button - beginner

Icon Button

button - beginner

Loading Button

button - intermediate

Outline Button

button - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I position the FAB on the left side?▼

Replace right-6 with left-6.

Can I make the FAB expand on hover?▼

Yes, add a span with the label text and use group-hover:w-auto group-hover:px-4 with overflow-hidden.