This example demonstrates handling common "gotchas" with outlined buttons:
ensuring true background transparency with
bg-transparent
and providing clear, distinct hover and focus states.
bg-transparent
):
While HTML
<button>
elements are typically transparent by default, explicitly adding
bg-transparent
is a robust way to ensure this behavior.
It's particularly important if:
<div>
or other element that might have an inherited background.
Outlined buttons need clear visual feedback for user interactions:
hover:bg-purple-600 hover:text-white
):
Provides immediate feedback when the mouse pointer is over the button by filling it with color.
focus:outline-none focus:ring-2 ...
):
Crucial for accessibility, especially for keyboard navigation. It adds a distinct visual ring around the button when it's focused, making it clear which element is active.
focus:outline-none
is often paired with custom ring styles to avoid default browser outlines clashing with Tailwind rings.