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

Эффект наведения мыши на кнопку в CSS

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

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

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

При открытие сайта или страницы:

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

Анимарованная кнопка с эффектом на сайт

Установка:

HTML

Код

<div>
  <a class="tusamopad_kinuvesog" href="Ссылка для перехода">
  Погнали!
  <span class="kevanug"></span>
  </a>
</div>

CSS

Код

.tusamopad_kinuvesog {
  color: #171515;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 24px;
  position: relative;
  padding: 8px 43px 8px 15px;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;

  -webkit-transform: scale(3);

  -ms-transform: scale(3);

  transform: scale(3);
}

.tusamopad_kinuvesog .kevanug {
  background: #171515;
  width: 30px;
  height: 2px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -1px;
  z-index: -1;

  -webkit-transition: all 0.3s;

  -o-transition: all 0.3s;

  transition: all 0.3s;
}

.tusamopad_kinuvesog:hover {
  padding-right: 20px;
  color: #d9d9de;
}

.tusamopad_kinuvesog:hover .kevanug {
  height: 100%;
  width: 100%;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.tusamopad_kinuvesog .kevanug:before, .tusamopad_kinuvesog .kevanug:after {
  content: '';
  height: 2px;
  width: 10px;
  background: #171515;
  position: absolute;
  right: -2px;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.tusamopad_kinuvesog .kevanug:before {
  bottom: 3px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.tusamopad_kinuvesog .kevanug:after{
  top: 3px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.tusamopad_kinuvesog:hover .kevanug:before,
.tusamopad_kinuvesog:hover .kevanug:after{
  right: 0;
}

.tusamopad_kinuvesog:hover .kevanug:before{
  bottom: 6px;
}

.tusamopad_kinuvesog:hover .kevanug:after{
  top: 6px;
}

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

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

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

25 Марта 2019 Загрузок: 1 Просмотров: 1208 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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