Зміст курсу
Tailwind CSS: Styling for Modern Web Development
Tailwind CSS: Styling for Modern Web Development
Challenge: Buttons
Task
Using Tailwind CSS, create a button that meets the following requirements:
- The button should have a blue background (e.g.
bg-blue-500
); - When hovered over, the background color should change to a darker shade of blue (e.g.
bg-blue-700
); - When focused, the button should have a yellow background color (e.g.,
bg-yellow-500
); - When active (pressed), the background color should change to an even darker shade of blue (e.g.
bg-blue-900
); - When disabled, the button should appear with 50% opacity and a cursor that indicates it is not clickable.
index
index
index
- 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.
index
index
index
Дякуємо за ваш відгук!