Эффект наведения на кнопку
Часть раздела CSS Mastery путешествия по HTML на Coddy — урок 41 из 43.
Задание
ЛегкоКнопка уже добавлена в HTML. Ваша цель — сделать так, чтобы она немного увеличивалась в размере при наведении курсора. В CSS стилизуйте .cta-button так, чтобы:
- Она имела плавный переход
transition: transform 0.3s ease;. - При наведении она немного увеличивалась в размере с помощью
transform: scale(1.05).
Попробуйте сами
<html>
<head>
<title>Button Hover Effect</title>
<style>
/* Add your styles here */
.cta-button {
background-color: #6a1b9a;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
font-size: 1rem;
}
</style>
</head>
<body>
<button class="cta-button">Click Me</button>
</body>
</html>
Все уроки раздела CSS Mastery
1Мастерство селекторов — Комбинации
ВведениеСелектор потомковДочерний селекторСмежный селекторОбщий родственный селекторИтоговое испытание4Проект: Выпадающее меню
Добавление подменюОтображение подменюДополнительная стилизацияПоле ввода и кнопка2Интерактивные псевдоклассы
ПсевдоклассыЭффекты наведенияЭффекты фокусаАктивные стилиИтоговое испытание3Структурные псевдоклассы
Структурные псевдоклассыВыбор первого дочернего элементаВыбор последнего дочернего элементаСила шаблонов: использование nth-childЗадание на повторение9Финальные испытания
Подсветка активного пункта менюЧередование строк таблицыЭффект наведения на кнопкуСетка карточекРазмытое Hero-изображение