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

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

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

В прошлом году я поделилась с вами набором из 8 простых переходов, которые поразят ваших пользователей, а сегодня мы рассмотрим еще 8 эффектов…

Начинаем

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

<button>Hover Me</button>

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

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

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

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

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;
}

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

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

Источник: http://www.developerdrive.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (4)

  1. Альфира

    Журнал № 96 от 2 июля. Урок «8 простых CSS эффектов». Хотела научиться делать эффекты для кнопок. Но у меня не получается. Что я делаю не так. Именно меня интересует: горизонтальное заполнение!

    код в html:
    Hover Me

    код в css:

    .button
    {
    border: none;
    background: #3a7999;
    color: #f2f2f2;
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    position: relative;
    box-sizing: border-box;
    transition: all 500ms ease;
    }
    .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;
    }
    .button:hover:before
    {
    width: 100%;
    }

    • Андрей Кудлай

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

  2. Людмила

    Ну и как всегда половинчатая информация, которую невозможно применить новичку.
    А где HTML часть кода для кнопки?

    • Андрей Кудлай

      Людмила, она есть — это самая первая строка кода в статье:
      <button>Hover Me</button>

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree