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

bookСтворення та стилізація кнопок

Кнопки є основними інтерактивними елементами у веб-дизайні. Tailwind CSS надає різноманітні утиліти для ефективного стилізування кнопок і керування їх різними станами, такими як наведення, фокус і активний стан.

Базове стилізування кнопки

Для стилізування базової кнопки можна використовувати утиліти для фону, кольору тексту, відступів, радіусу межі та товщини шрифту.

index.html

index.html

copy

Пояснення

  1. bg-yellow-500: Встановлює колір фону на відтінок синього;
  2. text-white: Встановлює білий колір тексту;
  3. font-bold: Робить текст жирним;
  4. py-2: Додає вертикальні відступи (0.5rem або 8px);
  5. px-4: Додає горизонтальні відступи (1rem або 16px);
  6. rounded: Додає невеликі заокруглені кути.

Стан при наведенні

Щоб змінити вигляд кнопки при наведенні курсору, використовуйте префікс hover: з будь-яким класом утиліти.

index.html

index.html

copy

hover:bg-blue-700: Змінює колір фону на темно-синій при наведенні курсору на кнопку.

Стан фокусу

Щоб стилізувати кнопку у стані фокусу (наприклад, коли вона вибрана за допомогою клавіатури), можна використовувати префікс focus: з будь-яким класом утиліти.

index.html

index.html

copy

У цьому прикладі, коли ви наводите курсор миші на кнопку, її колір змінюється на синій. Якщо ви використовуєте кнопку Tab, кнопка стане червоною.

Активний та неактивний стани

Активний та неактивний стани використовуються рідше. Однак, їх також слід враховувати.

Щоб стилізувати кнопку у активному стані (наприклад, коли на неї натискають), можна використовувати префікс active: з будь-яким утилітним класом.

Щоб стилізувати кнопку у неактивному стані (наприклад, коли вона недоступна для взаємодії), можна використовувати префікс disabled: з будь-яким утилітним класом.

index.html

index.html

copy

Пояснення

  1. active:bg-green-800: Змінює колір фону на темніший відтінок зеленого, коли кнопка активна (натиснута);
  2. opacity-50: Зменшує прозорість кнопки, щоб вона виглядала неактивною;
  3. cursor-not-allowed: Змінює вигляд курсора, щоб показати, що кнопка недоступна для натискання;
  4. Атрибут disabled: Робить кнопку неінтерактивною.

Приклад усіх станів

Об'єднання всіх станів в одному прикладі

index.html

index.html

copy

Пояснення

  1. bg-blue-500: Встановлює стандартний колір фону;
  2. hover:bg-blue-700: Змінює колір фону при наведенні курсора;
  3. focus:outline-none: Видаляє стандартний контур фокусу;
  4. focus:ring-2: Додає кільце фокусу товщиною 2 пікселі;
  5. focus:ring-blue-600: Встановлює колір кільця фокусу;
  6. focus:ring-opacity-50: Встановлює прозорість кільця фокусу;
  7. active:bg-blue-800: Змінює колір фону, коли кнопка активна;
  8. text-white: Встановлює білий колір тексту;
  9. font-bold: Робить текст жирним;
  10. py-2: Додає вертикальні відступи;
  11. px-4: Додає горизонтальні відступи;
  12. rounded: Додає невеликі закруглені кути.

Примітка

Якщо потрібно детальніше ознайомитися з компонентом кнопки Tailwind, ось посилання на офіційну документацію.

1. Як змінити колір фону кнопки при наведенні курсора?

2. Який клас утиліти видаляє стандартний контур фокусу з кнопки?

3. Який клас утиліти змінює колір фону кнопки, коли вона активна (натиснута)?

question mark

Як змінити колір фону кнопки при наведенні курсора?

Select the correct answer

question mark

Який клас утиліти видаляє стандартний контур фокусу з кнопки?

Select the correct answer

question mark

Який клас утиліти змінює колір фону кнопки, коли вона активна (натиснута)?

Select the correct answer

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

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

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

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

Запитати АІ

expand

Запитати АІ

ChatGPT

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

Suggested prompts:

Can you explain how to combine multiple states for a button in Tailwind?

What are some best practices for accessible button design with Tailwind?

Can you show more examples of custom button styles using Tailwind?

Awesome!

Completion rate improved to 3.57

bookСтворення та стилізація кнопок

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

Кнопки є основними інтерактивними елементами у веб-дизайні. Tailwind CSS надає різноманітні утиліти для ефективного стилізування кнопок і керування їх різними станами, такими як наведення, фокус і активний стан.

Базове стилізування кнопки

Для стилізування базової кнопки можна використовувати утиліти для фону, кольору тексту, відступів, радіусу межі та товщини шрифту.

index.html

index.html

copy

Пояснення

  1. bg-yellow-500: Встановлює колір фону на відтінок синього;
  2. text-white: Встановлює білий колір тексту;
  3. font-bold: Робить текст жирним;
  4. py-2: Додає вертикальні відступи (0.5rem або 8px);
  5. px-4: Додає горизонтальні відступи (1rem або 16px);
  6. rounded: Додає невеликі заокруглені кути.

Стан при наведенні

Щоб змінити вигляд кнопки при наведенні курсору, використовуйте префікс hover: з будь-яким класом утиліти.

index.html

index.html

copy

hover:bg-blue-700: Змінює колір фону на темно-синій при наведенні курсору на кнопку.

Стан фокусу

Щоб стилізувати кнопку у стані фокусу (наприклад, коли вона вибрана за допомогою клавіатури), можна використовувати префікс focus: з будь-яким класом утиліти.

index.html

index.html

copy

У цьому прикладі, коли ви наводите курсор миші на кнопку, її колір змінюється на синій. Якщо ви використовуєте кнопку Tab, кнопка стане червоною.

Активний та неактивний стани

Активний та неактивний стани використовуються рідше. Однак, їх також слід враховувати.

Щоб стилізувати кнопку у активному стані (наприклад, коли на неї натискають), можна використовувати префікс active: з будь-яким утилітним класом.

Щоб стилізувати кнопку у неактивному стані (наприклад, коли вона недоступна для взаємодії), можна використовувати префікс disabled: з будь-яким утилітним класом.

index.html

index.html

copy

Пояснення

  1. active:bg-green-800: Змінює колір фону на темніший відтінок зеленого, коли кнопка активна (натиснута);
  2. opacity-50: Зменшує прозорість кнопки, щоб вона виглядала неактивною;
  3. cursor-not-allowed: Змінює вигляд курсора, щоб показати, що кнопка недоступна для натискання;
  4. Атрибут disabled: Робить кнопку неінтерактивною.

Приклад усіх станів

Об'єднання всіх станів в одному прикладі

index.html

index.html

copy

Пояснення

  1. bg-blue-500: Встановлює стандартний колір фону;
  2. hover:bg-blue-700: Змінює колір фону при наведенні курсора;
  3. focus:outline-none: Видаляє стандартний контур фокусу;
  4. focus:ring-2: Додає кільце фокусу товщиною 2 пікселі;
  5. focus:ring-blue-600: Встановлює колір кільця фокусу;
  6. focus:ring-opacity-50: Встановлює прозорість кільця фокусу;
  7. active:bg-blue-800: Змінює колір фону, коли кнопка активна;
  8. text-white: Встановлює білий колір тексту;
  9. font-bold: Робить текст жирним;
  10. py-2: Додає вертикальні відступи;
  11. px-4: Додає горизонтальні відступи;
  12. rounded: Додає невеликі закруглені кути.

Примітка

Якщо потрібно детальніше ознайомитися з компонентом кнопки Tailwind, ось посилання на офіційну документацію.

1. Як змінити колір фону кнопки при наведенні курсора?

2. Який клас утиліти видаляє стандартний контур фокусу з кнопки?

3. Який клас утиліти змінює колір фону кнопки, коли вона активна (натиснута)?

question mark

Як змінити колір фону кнопки при наведенні курсора?

Select the correct answer

question mark

Який клас утиліти видаляє стандартний контур фокусу з кнопки?

Select the correct answer

question mark

Який клас утиліти змінює колір фону кнопки, коли вона активна (натиснута)?

Select the correct answer

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

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

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

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