Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Impara Creating and Styling Buttons | Building Basic Components
Tailwind CSS for Web Development

book
Creating and Styling Buttons

Buttons are fundamental interactive elements in web design. Tailwind CSS provides a variety of utilities to style buttons effectively and manage their different states, such as hover, focus, and active.

Basic Button Styling

To style a basic button, you can use utilities for background color, text color, padding, border radius, and font weight.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons - Example 1</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded">
Basic Button
</button>
</body>
</html>

Explanation

  1. bg-yellow-500: Sets the background color to a shade of blue;

  2. text-white: Sets the text color to white;

  3. font-bold: Makes the text bold;

  4. py-2: Adds vertical padding (0.5rem or 8px);

  5. px-4: Adds horizontal padding (1rem or 16px);

  6. rounded: Adds small rounded corners.

Hover State

To change the appearance of a button when the user hovers over it, you can use the hover: prefix with any utility class.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons - Example 2</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-yellow-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
Basic Button
</button>
</body>
</html>

hover:bg-blue-700: Changes the background color to a dark blue when the button is hovered over.

Focus State

To style a button when it is focused (e.g., when it is selected using the keyboard), you can use the focus: prefix with any utility class.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons - Example 3</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-yellow-500 hover:bg-blue-700 focus:bg-red-700 text-white font-bold py-2 px-4 rounded"
>
Basic Button
</button>
</body>
</html>

In this example, when you hover the mouse cursor over a button, it changes to blue. If you use the Tab button, the button will turn red.

Active and Disabled States

Active and disabled states are used more seldom. However, we should consider it as well.

To style a button when it is active (e.g., when it is being clicked), you can use the active: prefix with any utility class.

To style a button when it is disabled (e.g., when it cannot be interacted with), you can use the disabled: prefix with any utility class.

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons - Example 4</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-green-500 active:bg-green-800 text-white font-bold py-2 px-4 rounded"
>
Active Button
</button>
<button
class="bg-green-500 text-white font-bold py-2 px-4 rounded opacity-50 cursor-not-allowed"
disabled
>
Disabled Button
</button>
</body>
</html>

Explanation

  1. active:bg-green-800: Changes the background color to a darker shade of green when the button is active (pressed);

  2. opacity-50: Reduces the button's opacity to make it look disabled;

  3. cursor-not-allowed: Changes the cursor to indicate that the button is not clickable;

  4. disabled attribute: Maks it non-interactive.

Example of All States

Combining all states into one example

html

index.html

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Buttons - Example 5</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-blue-500 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-opacity-50 active:bg-blue-800 text-white font-bold py-2 px-4 rounded"
>
Interactive Button
</button>
</body>
</html>

Explanation

  1. bg-blue-500: Sets the default background color;

  2. hover:bg-blue-700: Changes the background color on hover;

  3. focus:outline-none: Removes the default focus outline;

  4. focus:ring-2: Adds a focus ring with a width of 2 pixels;

  5. focus:ring-blue-600: Sets the color of the focus ring;

  6. focus:ring-opacity-50: Sets the opacity of the focus ring;

  7. active:bg-blue-800: Changes the background color when the button is active;

  8. text-white: Sets the text color to white;

  9. font-bold: Makes the text bold;

  10. py-2: Adds vertical padding;

  11. px-4: Adds horizontal padding;

  12. rounded: Adds small rounded corners.

Note

If you need to delve deeper into the Tailwind Button Component, here is a link to the official documentation.

1. How do you change the background color of a button when it is hovered over?

2. Which utility class removes the default focus outline of a button?

3. Which utility class changes the background color of a button when it is active (pressed)?

question mark

How do you change the background color of a button when it is hovered over?

Select the correct answer

question mark

Which utility class removes the default focus outline of a button?

Select the correct answer

question mark

Which utility class changes the background color of a button when it is active (pressed)?

Select the correct answer

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 3. Capitolo 1

Chieda ad AI

expand
ChatGPT

Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione

We use cookies to make your experience better!
some-alt