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

Эффект зависания для кнопки в HTML и CSS

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

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

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

Так реально смотрится:

1. Выглядит по умолчанию.

Кнопка на чистых стилях CSS

2. Вид при наведенье курсора.

Анимация для кнопки сайта

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

HTML

Код

<button class="demsinsetes">Zornet.Ru</button>

CSS

Код

.demsinsetes {
  background: #ad15ac;
  height: 52px;
  width: 215px;
  border: 0;
  color: #fdfdfd;
  border: 2px solid #b5b3b3;
  text-align: center;
  padding: 0;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  font-size: 19px;
  border-radius: 3px;
}

.demsinsetes:after {
  background: #f5f3f3;
  height: 51px;
  width: 100%;
  border: 0;
  color: #104cd8;
  border: 1px solid #001fe6;
  text-align: center;
  content: 'Zornet.Ru';
  display: block;
  position: absolute;
  top: -110%;
  left: -1px;
  line-height: 47px;
  transition: all 0.7s ease-in-out;
}

.demsinsetes:hover:after {
  position: absolute;
  top: -1px;
  left: -1px;
}

Вся цветовая палитра меняется в ручную, что можно выстроить оттенок под разные форматы.

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

19 Сентября 2018 Просмотров: 1176 Комментариев: (0)

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

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

Kosten

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