» »

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

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

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

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

Код
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

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
2019-12-19 Загрузок: 3 Просмотров: 324 Комментарий: (0)

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

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

Оставь свой отзыв

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