Hover - эффекты при наведении

Опыты проводим над кнопкой.


<button>Сюда иди</button>

Создадим базовые правила CSS для кнопки.


button {
    height: 42px;
	border: none;
	background: #3a7999;
	color: #f2f2f2;
	padding: 10px;
	font-size: 18px;
	border-radius: 5px;
	position: relative;
	box-sizing: border-box;
	transition: all 500ms ease; 
}

Мы задали цвет фона и текста, радиусы закругления, размер шрифта, отступы. Для анимации используем transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в течение 500 миллисекунд.

Горизонтальная заполнение

Полупрозрачный фоновый цвет постепенно заполняет кнопку при наведении. Обычно заполнение происходит с какой-то одной стороны и переход длится до тех пор, пока вся кнопка не будет заполнена.

Чтобы достичь такого результата, нужно использовать псевдо-элемент :before:


button:before {
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 42px;
	background: rgba(255,255,255,0.3);
	border-radius: 5px;
	transition: all 2s ease;
}

Данный контент абсолютно спозиционирован и расположен в верхнем левом углу кнопки. Зададим ширину равную 0px, потому что именно этот параметр мы будем анимировать. Чтобы анимировать его, мы просто изменим его ширину:


button:hover:before {
	width: 100%;
}

Вертикальное заполнение

Если анимировать высоту, то заполнение произойдёт сверху.


button:before {
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	background: rgba(255,255,255,0.3);
	border-radius: 5px;
	transition: all 2s ease;
}

button:hover:before {
	height: 42px;
}

Инвертирование цвета

Инвертируем цвет внутри кнопки и добавляем границу:


button:hover {
	background: rgba(0,0,0,0);
	color: #3a7999;
	box-shadow: inset 0 0 0 3px #3a7999;
}

Пунктирная граница

Добавим границу у кнопки и инвертируем цвета:


button {
	border: 3px solid #3a7999;
}

button:hover {
	border: 3px dotted #3a7999;
	color: #3a7999;
	background: rgba(0,0,0,0);
}

Появление значка

При наведении значок плавно появиться слева от текста.

Подключим шрифт со значками Font Awesome.


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Увеличим внутренний отступ, чтобы для значка было место, и добавим свойство overflow со значением hidden:


button{ 
	padding: 10px 35px;  
	overflow:hidden;
}

Далее добавляем значок из шрифта Font Awesome в псевдо-элемент before и размещаем его за пределами кнопки:


button:before {
	font-family: FontAwesome;
	content:"\f07a";
	position: absolute;
	top: 11px;
	left: -30px;
	transition: all 200ms ease;
}

Осталось установить свойство left:


button:hover:before {
	left: 7px;
}

Эффект подпрыгивания

Для данной анимации установим несколько ключевых кадров (keyframes):


@keyframes bounce {
	0%, 20%, 60%, 100% {
		transform: translateY(0);
		transform: translateY(0);
	}

	40% {
		transform: translateY(-20px);
		transform: translateY(-20px);
	}

	80% {
		transform: translateY(-10px);
		transform: translateY(-10px);
	}
}

Подключаем созданную анимацию:


button:hover {
	animation: bounce 1s;
}

Искажение

В CSS3 появилась возможность использовать искажения:


button:hover {
    transform: skew(-10deg);
}

3D-поворот

Самый сложный эффект. Используем поворот кнопки для отображения другого сообщения, которое мы добавим в псевдо-элемент after у нашей кнопки.

Зададим для свойства transform-style значение preserve-3d, чтобы все дочерние элементы кнопки находились в 3D-пространстве:


button {
	transform-style: preserve-3d;
}

Установим правила для псевдо-элемента after:


button:after {
	top: -100%;
	left: 0;
	width: 100%;
	position: absolute;
	background: #3a9999;
	border-radius: 5px;
	content: 'Flipped';
	transform-origin: left bottom;
	transform: rotateX(90deg);
}

Правила добавлены сверху, перед кнопкой, и выставлены такие же параметры width и border-radius, как и у самой кнопки. Что касается свойств трансформации, то в качестве опорной точки, относительно которой будет происходить трансформация, установлен нижний левый угол элемента и указано вращение по оси X со значением 90 градусов, чтобы элемент казался плоским. Сейчас осталось только создать анимацию при наведении:


button:hover {
	transform-origin: center bottom;
	transform: rotateX(-90deg) translateY(100%);
}

Чтобы активировать данный эффект, переместим опорную точку трансформации в центр, а также повернём сам элемент, чтобы реализовать трансформацию.

Источник

Реклама