Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Вивчайте Завдання: Стилізація Кнопок | Створення базових компонентів
Tailwind CSS для Веброзробки

bookЗавдання: Стилізація Кнопок

Завдання

Використовуючи Tailwind CSS, створіть кнопку, яка відповідає наступним вимогам:

  1. Кнопка повинна мати синій фон (наприклад, bg-blue-500);
  2. При наведенні курсору фон змінюється на темніший відтінок синього (наприклад, bg-blue-700);
  3. При фокусі кнопка повинна мати жовтий фон (наприклад, bg-yellow-500);
  4. При натисканні (активному стані) фон змінюється на ще темніший відтінок синього (наприклад, bg-blue-900);
  5. У вимкненому стані кнопка повинна мати прозорість 50% та курсор, який вказує на те, що вона неактивна.
index.html

index.html

copy
  • Використовуйте hover:bg-blue-700 для стану наведення;
  • Використовуйте focus:bg-yellow-500 для стану фокусу;
  • Використовуйте active:bg-blue-900 для активного стану;
  • Використовуйте opacity-50 cursor-not-allowed для вимкненого стану.
index.html

index.html

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you show me the complete HTML code for the button using Tailwind CSS?

How do I make the button disabled using Tailwind classes?

Can you explain how to combine these Tailwind classes for all the required states?

Awesome!

Completion rate improved to 3.57

bookЗавдання: Стилізація Кнопок

Свайпніть щоб показати меню

Завдання

Використовуючи Tailwind CSS, створіть кнопку, яка відповідає наступним вимогам:

  1. Кнопка повинна мати синій фон (наприклад, bg-blue-500);
  2. При наведенні курсору фон змінюється на темніший відтінок синього (наприклад, bg-blue-700);
  3. При фокусі кнопка повинна мати жовтий фон (наприклад, bg-yellow-500);
  4. При натисканні (активному стані) фон змінюється на ще темніший відтінок синього (наприклад, bg-blue-900);
  5. У вимкненому стані кнопка повинна мати прозорість 50% та курсор, який вказує на те, що вона неактивна.
index.html

index.html

copy
  • Використовуйте hover:bg-blue-700 для стану наведення;
  • Використовуйте focus:bg-yellow-500 для стану фокусу;
  • Використовуйте active:bg-blue-900 для активного стану;
  • Використовуйте opacity-50 cursor-not-allowed для вимкненого стану.
index.html

index.html

copy

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 3. Розділ 2
some-alt