ZorNet.Ru — сайт для вебмастера » HTML и CSS » Стильные эффекты для кнопки с помощью CSS

Стильные эффекты для кнопки с помощью CSS

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

Для самих значков используются шрифтовые кнопки от Matthew Skiles, где происходит добавление с помощью псевдокласса: before. Сама идея будет изначально состоять в том, это построить оригинальный, уникальный и стильный по виртуальности hover эффект под каждый элемент, где как раз используется CSS переходы с элементами анимации.

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

HTML

Код

<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a">
  <a href="#" class="hi-icon hi-icon-mobile">Мобильный</a>
  <a href="#" class="hi-icon hi-icon-screen">Рабочий стол</a>
  <a href="#" class="hi-icon hi-icon-earth">Партнеры</a>
  <a href="#" class="hi-icon hi-icon-support">Служба поддержки</a>
  <a href="#" class="hi-icon hi-icon-locked">Безопасность</a>
</div>

Разметка в примерах очень похожие, если нужно кардинально изменить основной эффект, то в этом случай нужно поменять на нужные классы.

CSS

Здесь представлен один их самых простых пример hover эффекта, это произойдет вращение псевдо-элемента кнопки.

Код

.hi-icon-effect-6 .hi-icon {
  box-shadow: 0 0 0 4px rgba(255,255,255,1);
  transition: background 0.2s, color 0.2s;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover {
  background: rgba(255,255,255,1);
  color: #64bb5d;
}

.no-touch .hi-icon-effect-6 .hi-icon:hover:before {
  animation: spinAround 2s linear infinite;
}

@keyframes spinAround {
  from {
  transform: rotate(0deg)
  }
  to {
  transform: rotate(360deg);
  }
}

PS - Здесь нужно обратить внимание, на то, что пунктирная рамка на круглом псевдо-элементе "border-radius: 50%" не корректно работает.

Демонстрация
Источник: Tympanus.net

05 Января 2019 Загрузок: 1 Просмотров: 1112 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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