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

Hover-эффект CSS кнопок при наведении

Кнопка с красивым эффектом, виде обвода самого основание элемента в несколько пикселей, которая идет в светлом оттенке, и создана на чистом CSS. Изначально она шла на SCSS, где просто понравился трюк при наведении курсора, и теперь есть возможность поставить на CSSS.

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

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

Удивительный эффект наведения CSS для текста с использованием CSS

При открытие страницы или сайта, вообщем по умолчанию:

Интересные hover эффекты

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

Настройка эффекта hover при наведении мыши на кнопку

Приступаем:

HTML

Код

<a href="zornet.ru" class="kenclan-pseudus">ZorNet.Ru</a>

CSS

Код

.kenclan-pseudus {
  display: inline-block;
  position: relative;
  overflow: hidden;
  background: #241f2b;
  color: #2f2938;
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  padding: 18px 25px;
  cursor: pointer;
  border-radius: 3px;
}

  .kenclan-pseudus:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f9f1f1;
  content: '';
  transform: rotate(-90deg) translate(-50%, -100%);
  transform-origin: top left;
  transition: transform .5s;
  }

  .kenclan-pseudus:hover:before {
  transform: rotate(0) translate(0);
  }

.kenclan-pseudus:after {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  background: #f1e7e7;
  border: #2e3240 solid 4px;
  color: #2c293a;
  content: 'ZorNet.Ru';
  font-family: 'Montserrat', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 15px 21px;
  border-radius: 3px;
}

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

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

08 Июня 2019 Загрузок: 1 Просмотров: 1233 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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