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

book
Challenge: Styling Buttons

Task

Using Tailwind CSS, create a button that meets the following requirements:

  1. The button should have a blue background (e.g. bg-blue-500 );

  2. When hovered over, the background color should change to a darker shade of blue (e.g. bg-blue-700 );

  3. When focused, the button should have a yellow background color (e.g., bg-yellow-500 );

  4. When active (pressed), the background color should change to an even darker shade of blue (e.g. bg-blue-900 );

  5. When disabled, the button should appear with 50% opacity and a cursor that indicates it is not clickable.

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>Challenge: Buttons - Task</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-_____ text-white font-bold py-2 px-4 rounded _____ _____ _____ _____ _____"
disabled
>
Click Button
</button>
</body>
</html>

  • Use hover:bg-blue-700 for hover state;

  • Use focus:bg-yellow-500 for focus state;

  • Use active:bg-blue-900 for active state;

  • Use opacity-50 cursor-not-allowed for disabled state.

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>Challenge: Buttons - Solution</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<button
class="bg-blue-500 text-white font-bold py-2 px-4 rounded hover:bg-blue-700 focus:bg-yellow-500 active:bg-blue-900 opacity-50 cursor-not-allowed"
disabled
>
Click Button
</button>
</body>
</html>

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 2

Vraag AI

expand
ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

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