Tailwind button style example
tailwindHere is an example of a button styled using Tailwind CSS classes:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full">
Button
</button>
In this example, the bg-blue-500 class sets the background color to a medium blue, the hover:bg-blue-700 class sets the background color to a dark blue on hover, the text-white class sets the text color to white, the font-bold class makes the text bold, the py-2 class adds padding to the top and bottom of the button, the px-4 class adds padding to the left and right of the button, and the rounded-full class adds rounded corners to the button.
You can customize this button by modifying the classes used or by adding additional classes as needed. For example, you can use the focus:outline-none class to remove the focus outline, or the transition-colors class to add a smooth color transition when the button is hovered or focused.
Here is an example of a customized button:
<button
class="bg-pink-500 hover:bg-pink-700 focus:bg-pink-800 text-white font-bold py-2 px-4 rounded-full focus:outline-none transition-colors duration-150">
Button
</button>
In this example, the focus:bg-pink-800 class sets the background color to a light pink on focus, the focus:outline-none class removes the focus outline, and the transition-colors class adds a smooth color transition when the button is hovered or focused with a duration of 150 milliseconds.
Other Article on Tag tailwind
- - Tailwind add padding in t-head and body
- - Tailwind Breadcrumb style example
- - Tailwind button group style example
- - Tailwind button style example
- - Tailwind card component example
- - Tailwind create component in an Angular project
- - Tailwind CSS accordion style example
- - Tailwind CSS advantages and disadvantages
- - Tailwind CSS dropdown style example
- - Tailwind CSS install to angular