Анимированная кнопка при наведение

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

Анимированная кнопка при наведение

Разметка HTML

Давайте начнем с обычной разметки html. Добавляем кнопку, и задаем ей класс hover-button.


<div class="main">
    <div class="btn-block">
      <button class="hover-button"><span>Дальше</span></button>
    </div>
  </div>

Css

Теперь приступаем к стилизации. В этом коде мы добавим стили к кнопки и ее позиции, а также к ней мы добавим свойство transition для плавного перехода. Если вы не знаете про свойство transition, то вы можете прочитать про это, по этой ссылке Свойство transition


@import url('https://fonts.googleapis.com/css?family=Scada');
*{margin: 0px; padding: 0px}
button{
  color:#fff;
  text-align: center;
  padding: 20px;
  font-family: 'Scada', sans-serif;
}
.main{
  width: 100%;
}
.btn-block {
    display: flex;
justify-content: center;
margin-top: 20%;
}
.hover-button {
  text-align: center;
  cursor: pointer;
  font-size: 1.2em;
}
.hover-button {
  border-radius: 4px;
  background-color:#d35400;
  border: none;
  padding: 10px 20px 10px 20px;
  transition: all 0.5s;
}
.hover-button span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

Нам осталось добавить саму стрелочки, и добавить ей свойтво opacity, чтобы при наведении она появлялась.


.hover-button span:after {
  content: '»';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}
.hover-button:hover span {
  padding-right: 25px;
}
.hover-button:hover span:after {
  opacity: 1;
  right: 0;
}