ZorNet.Ru — сайт для вебмастера » HTML и CSS » Кнопки с hover эффектом CSS при наведении

Кнопки с hover эффектом CSS при наведении

Это простой эффект для кнопок, где применяются шрифтовые кнопки на CSS, которые отлично подойдут для обозначения на любом тематическом сайте. А так стиль заключается в том, что мы ставим цветовую гамму под основной дизайн сайта, а вот знаки при наведении клика будут немного двигаться, где на одной кнопки поставили шрифтовую иконку от ionicons, что когда значение слово отодвигается, то появляется стрелка.

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

Первое, что нужно сделать, это подключить стили на кнопки.

Код

HTML

Код

<button class="knoposku"><span>Скрипты</span><i class="ion-android-arrow-dropright"></i></button>
<button class="knoposku siniy"><span>Дизайн</span><i class="ion-android-arrow-dropright-circle"></i></button>
<button class="knoposku krasnaya"><span>Стилистика</span><i class="ion-android-arrow-forward"></i></button>
<button class="knoposku veltaya"><span>Информация</span><i class="ion-android-arrow-dropleft-circle"></i></button>

CSS

Код

button.knoposku {
  font-family: 'Raleway', Arial, sans-serif;
  border: none;
  background-color: #1f1e1e;
  border-radius: 5px;
  text-shadow: 0 1px 0 #0a0a0a;
  color: #fffcfc;
  cursor: pointer;
  padding: 10px 30px;
  display: inline-block;
  margin: 10px 25px;
  text-transform: uppercase;
  line-height: 24px;
  font-weight: 400;
  font-size: 15px;
  outline: none;
  position: relative;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

button.knoposku span {
  display: inline-block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0.8;
}

button.knoposku i {
  font-size: 21px;
  left: 22px;
  position: absolute;
  opacity: 0;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

button.knoposku:hover span,
button.knoposku.hover span {
  -webkit-transform: translate3d(12px, 0px, 0px);
  transform: translate3d(15px, 0px, 0px);
  opacity: 1;
}

button.knoposku:hover i,
button.knoposku.hover i {
  opacity: 0.8;
}

button.knoposku:active span {
  -webkit-transform: translate3d(15px, 0px, 0px);
  transform: translate3d(15px, 0px, 0px);
}

button.knoposku:active i {
  left: 20px;
}

button.knoposku.siniy {
  background-color: #125079;
}

button.knoposku.krasnaya {
  background-color: #591173;
}

button.knoposku.veltaya {
  background-color: #756715;
}

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

Демонстрация
Шрифтовые кнопки Ionicons

19 Декабря 2019 Загрузок: 3 Просмотров: 1172 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

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