Эффект наведения

Урок 7 из 8 курса CSS-проект: Стильная кнопка на Coddy.

Давайте добавим эффект при наведении на кнопку!

Чтобы изменить кнопку при наведении, мы используем псевдокласс :hover,

.fancyButton:hover {
	background-color: red;
}

В приведенном выше примере наша кнопка станет красной при наведении!

Чтобы сделать переход плавным, используйте:

.fancyButton {
	...
	transition: all 0.2s;
}

Вы можете поэкспериментировать со временем перехода (0.2s).

Задание

Легко

Добавьте эффект наведения к вашей кнопке, сделайте её красивой!

Обязательные задачи:

Добавьте свойство transition к вашей кнопке, время на ваш выбор, меньше или равно 1 секунде.
Добавьте opacity: 0.8; к эффекту наведения кнопки.

Необязательные и рекомендуемые свойства для изменения при наведении:

тени (box-shadow)
цвет фона

Попробуйте сами

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <!-- Write HTML code here -->
    </body>
</html>

Все уроки раздела CSS-проект: Стильная кнопка

1Введение

2Проект на CSS

Эффект наведения Урок-проект

Финальная стилизация