CSS — эффект затухания при наведении курсора (Переход без JavaScript)

CSS - эффект затухания при наведении курсора (переход без JavaScript)

Мы собираемся показать, как сделать эффект зависания при наведении курсора мыши на кнопку. Это очень просто! Надеюсь, что каждый сможет успешно создать кнопку эффекта затухания с помощью этого кода CSS!

HOVER ВАШ МЫШ КУРСОР ЗДЕСЬ!

Поместите этот код в свой HTML

HOVER ВАШ МЫШ КУРСОР ЗДЕСЬ!

Поместите этот код в свой CSS

.Fadebutton {
выравнивания текста: центр;
обивка: 20px 20px;
фон: #fff;
высота строки: 60px;
переход: непрозрачность 0,5 с;
-webkit-transition: все легкость 0.5 с;
-Моз-переход: все легкость 0,5 с;
-o-переход: все легкость 0,5 с;
-мс-переход: все легкость 0,5 с;
переход: все легкость 0,5 с;
граница: 1px solid # ff3000;
пограничный радиус: 5px;
}

.кнопка исчезновения: hover {
фон: # ff3000;
цвет: #fff;
-webkit-transition: все легкость 0,7 с;
-Моз-переход: все легкость 0,7 с;
-o-переход: все легкость 0,7 с;
-мс-переход: все легкость 0,7 с;
переход: все легкость 0,5 с;
}

Ссылка на основную публикацию