CSS Button Previews

HTML Code:

<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out">
    Hover Me
</button>

Copy HTML

Tailwind Classes Explanation:

bg-green-600: Sets background color to a shade of green.
hover:bg-green-700: Changes background color to a darker green on hover.
text-white: Sets text color to white.
font-bold: Makes the text bold.
py-3: Adds vertical padding (12px).
px-8: Adds horizontal padding (32px).
rounded-lg: Applies large border-radius for rounded corners.
shadow-md: Adds a medium box shadow.
transition: Enables CSS transitions for smooth changes.
duration-300: Sets transition duration to 300ms.
ease-in-out: Uses an ease-in-out timing function for transitions.

Copy Explanation

HTML Code:

<button class="border border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-6 rounded-full transition duration-300 ease-in-out">
    Click Me
</button>

Copy HTML

Tailwind Classes Explanation:

border: Adds a border.
border-blue-500: Sets border color to a shade of blue.
text-blue-500: Sets text color to blue.
hover:bg-blue-500: Changes background to blue on hover.
hover:text-white: Changes text to white on hover.
font-semibold: Sets font weight to semi-bold.
py-2: Adds vertical padding.
px-6: Adds horizontal padding.
rounded-full: Makes the button fully rounded (pill shape).
transition: Enables CSS transitions.
duration-300: Sets transition duration to 300ms.
ease-in-out: Uses an ease-in-out timing function.

Copy Explanation