ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оригинальный Hover-эффект на CSS3 для кнопки

Оригинальный Hover-эффект на CSS3 для кнопки

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

Но дело в том, что как раз этот рисунок, когда клике находится на кнопки, то он начинает идти в низ, что смотрится красиво и безусловно оригинально. Изначально все настроено по скорости, что выставлена в стилях, так как нет здесь Javascript и все работает при помощи CSS, что совершенно интернет ресурс не заметит нагрузки.

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

Ширину сами ставите, она зависит от заголовка:

Вращающееся кнопки с помощью CSS

Здесь больше знаков, что в пикселях аналогично ставится.

Кнопки для сайта на css, css3, jquery с эффектом

HTML

Код

<a href="http://zornet.ru" id="kalimrudes_sarung" class="tedsad_timilan">Сайт ZorNet.Ru</a>

CSS

Код

#kalimrudes_sarung {
  background: #bf2525f7 url(http://zornet.ru/Aben/ABGDA/zornet_ru/kersa/bkg-1.jpg);
  background-position: 0 0;
  color: #f7f4f4;
  text-shadow: 0px 3px 0px rgba(39, 38, 38, 0.35);
  font-size: 19px;
  height: 47px;
  width: 165px;
  margin: 36px 0 0 73px;
  overflow: hidden;
  display: block;
  text-align: center;
  line-height: 45px;
  -webkit-transition: All 0.8s cubic-bezier(0.25, 0.1, 0.19, 0.85);
  -moz-transition: All 0.8s cubic-bezier(0.25, 0.1, 0.22, 0.86);
  -o-transition: All 0.8s cubic-bezier(0.25, 0.1, 0.1, 0.88);
  -ms-transition: All 0.8s cubic-bezier(0.25, 0.1, 0.1, 0.86);
  transition: All 0.8s cubic-bezier(0.25, 0.1, 0.1, 0.9);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: 0px 3px 1px rgba(16, 16, 16, 0.24);
  -moz-box-shadow: 0px 3px 1px rgba(35, 35, 35, 0.28);
  box-shadow: 0px 3px 1px rgba(21, 20, 20, 0.23);
}

#kalimrudes_sarung:hover {
  background-position: 0px 148px;
}

По большей части это похоже на предыдущий пример. Однако обратите внимание, что теперь у нас есть фоновое изображение "это будет повторяться по умолчанию" идти.

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

Демонстрация:

31 Декабря 2017 Просмотров: 1697 Комментариев: (0)

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

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

Kosten

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