Site icon Vavik96

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

По мере того как с каждым релизом новых версий браузеров растет поддержка CSS3, а скучные браузеры, поддерживающие только CSS2, постепенно уходят со «сцены», у нас появляется гораздо больше вариантов для использования эффектов при наведении и переходов. Практически все кнопки призыва к действию (call-to-action), которые можно увидеть на веб-сайтах, используют в том или ином виде эффекты при наведении, потому что они привлекают внимание и делают веб-сайт более интересным.

Начинаем

Как и раньше мы начнем с очень простого HTML, к которому мы затем будем применять эффекты:

 

<button>Hover Me</button>

 

Мы также будем использовать набор базовых CSS стилей для всех переходов и анимаций. Мы просто зададим некоторые начальные параметры, например, цвет фона и размер шрифта.

По-настоящему важное правило находится в самом конце — это transition: all 500ms ease, которое означает, что в нужный момент будут анимированы все свойства в промежутке равном 500 миллисекунд:

А теперь к самому интересному…

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

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

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

 

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

 

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

 

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

 

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

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

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

Источник

Exit mobile version