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

Красивый hover-эффект кнопки на чистом CSS

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

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

Так по умолчанию идет:

css эффекты при наведении на текст

Здесь когда клик навели:

hover эффекты для кнопок

Приступаем к установке:

HTML

Код

<a class="zornet_ru_gumin" href="#">
  <div class="tunidsakersa">
  <div class="vesazkumil">Сайт</div>
  <div class="tunonad">ZORNET.RU</div>
  </div>
</a>

CSS

Код

.zornet_ru_gumin {
  height: 70px;
  width: 250px;
  display: inline-block;
  text-decoration: none;
  color: #f9efef;
  overflow: hidden;
  position: relative;
  font-family: helvetica;
  font-weight: bold;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-radius: 53px;
  border: none;
  margin-right: 65px;
}
.tunidsakersa {
  position: absolute;
  transition: all 0.5s ease;
  top: 0;
}
.tunidsakersa div {
  height: 70px;
  width: 250px;
  text-align: center;
  font-size: 27px;
  line-height: 70px;
}
.zornet_ru_gumin:hover .tunidsakersa { top: -70px; transition: all 0.3s ease; }
.vesazkumil { background-color: #2e880e; }
.tunonad { background-color: #821260; }

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

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

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

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

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

Kosten

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