Интересный hover-эффект для кнопки на CSS
Интересный hover-эффект для кнопки на CSS
CSS   209

В сегодняшнем уроке мы рассмотрим способ создания интересного hover-эффекта для кнопки на чистом CSS, без использования скриптов.

Шаг 1. HTML-разметка

Для начала создадим html-разметку. Она простая, состоит из одного блока div и одной кнопки button:

Шаг 2. Стили для блока

Наша кнопка расположена в блоке, который имеет класс button_block. Это обычный блок, для него мы просто указали, что все элементы кнопки (button), которые находятся в нем, не имели внешнюю границу:

.button_block button {
 outline: none;
 border: none;
 margin-top: 20px;
}

Шаг 3. Стили для кнопки

Теперь нам нужно добавить стили для нашей кнопки – это то, как она будет выглядеть без эффектов. Для нее мы создали класс button, а также добавили псевдоэлементы after и before, что это и для чего их используют, надеемся понятно:

.button {
 width: 60px;
 height: 60px;
 display: inline-block;
 position: relative;
 border-radius: 50%;
 background: #e32a2a;
 font-size: 40px;
 line-height: 60px;
 color: #ffffff;
 z-index: 1;
}

.button:after {
 content: "";
 width: 100%;
 height: 100%;
 position: absolute;
 border-radius: 50%;
}
 
.button:before {
 content: "+";
 font-size: 40px;
 line-height: 60px;
 display: block;
}

Небольшое объяснение того, для чего нужны эти псевдоэлементы

After – псевдоэлемент, который используется для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлемент :after работает совместно со свойством content.

Before – псевдоэлемент :before применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

Шаг 4. Стили для самого эффекта

Теперь добавим стили для нашего эффекта. Для этого создадим класс signal и укажем в нем нужные нам свойства.

.signal {
 transition: ease-out 0.1s, background 0.2s;
}
 
.signal:after {
 top: 0;
 left: 0;
 padding: 0;
 z-index: -1;
 transform: scale(0.9);
}
 
.signal:hover:after {
 animation: signal 1.3s ease-out 75ms;
}

Здесь мы добавили свойства transition, transform и animation. Обратите внимание, что свойству animation мы присвоили имя signal. Также использовали псевдоэлемент after в сочетании с hover.

Шаг 5. Ключевые кадры для анимации

На последнем шаге нам нужно добавить ключевые кадры для того, чтобы анимация начала работать. Кадры добавляются с помощью правила @keyframes. Кадрам должно быть присвоено имя, оно указывается в свойстве animation. В нашем случае это signal:

@keyframes signal {
 0% {opacity: 0.3;}
 40% {
  opacity: 0.5;
  box-shadow: 0px 0px 10px 10px #e32a2a;
 }
 100% {
  box-shadow: 0px 0px 10px 10px #e32a2a;
  transform: scale(1.5);
  opacity: 0;
 }
} 

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

Если что-то не работает, то скачайте исходники и посмотрите где у вас ошибки.

Автор урока: редакция REDSTAR
Урок для Вас подготовлен командой сайта red-star.pro.