8 простых CSS эффектов при наведении

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

Здесь мы изменяем лишь параметр высоты вместо ширины:

view sourceprint?
1.button:hover:before {
2.height: 42px;
3.}button:hover:before {
	height: 42px;
}

3. «Кнопка-призрак»

Сейчас мы создадим простой, но очень эффектный переход для нашей кнопки. Эффект «кнопки-призрака» заключается в том, что мы инвертируем цвет внутри кнопки и добавляем границу:

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

При наведении я задаю для кнопки прозрачный фон, чтобы он подходил к окружающему фону вокруг элемента. Затем я добавляю цвет и простую тень.

4. Появление иконки

Данный эффект замечательно подходит для различных действий, например, добавление товара в корзину или отправка формы. Он заключается в том, чтобы заставить иконку плавно появиться слева от текста, когда пользователь наводит курсором мыши на кнопку.

Первым делом я немного увеличила внутренний отступ, чтобы для появляющейся иконки было место, и добавила свойство 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;
}

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

В данной анимации мы установим для кнопки несколько ключевых кадров (keyframes), чтобы получить при наведении на кнопку эффект подпрыгивания. Это всегда отлично привлекает внимание пользователей. Сначала нам нужно создать ключевые кадры:

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

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

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

А теперь мы просто добавляем анимацию при наведении:

button:hover {
	animation: bounce 1s;
}

6. Искажение

Искажение, определенно, является одним из наболее специфичных трансформаций в CSS3. Данный эффект присутствует в программе Photoshop уже на протяжении многих лет, но его появление в CSS3, по меньшей мере, стало настоящим сюрпризом. Тем не менее, это интересный переход, и его использование является очень простым. Просто установим его при наведении:

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

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

Этот эффект очень похож на эффект с «кнопкой-призраком», но вместо сплошной границы у нас будет пунктирная линия. Все, что нам действительно нужно сделать, — это добавить границу у кнопки и инвертировать цвета:

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

8. Эффект 3D переворота

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

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

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

После этого нам нужно заняться нашим псевдо-элементом after:

button:after {
	top: -100%;
	left: 0px;
	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%);
}

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

Автор: Sara Vieira

Источник