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

3 простых hover-эффекта CSS для кнопки

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

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

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

Первый вариант:

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

HTML

Код

CSS

Код

.amesdem-dvelopmen {
  display: flex;
  justify-content: center;
}

.ledepevio-usugasemes {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  z-index: -10;
  background-color: salmon;
}

.aractes-dasbeing {
  background-color: #71136f;
  color: #f5f0f0;
  padding: 2em 3em;
  border: none;
  transition: all .3s ease;
  border-radius: 3px;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
  align-self: center;
  cursor: pointer;
  font-weight: bold;
}

.aractes-dasbeing::before {
  content: attr(data-off);
}

.aractes-dasbeing:hover {
  animation: random-bg .5s linear infinite, grow 1300ms ease infinite;
}

.previousga {
  display: none;
}

.previousga:checked ~ .aractes-dasbeing {
  background-color: #fff !important;
  color: salmon !important;
}

.previousga:checked ~ .aractes-dasbeing::before {
  content: attr(data-on);
}

. previousga:checked ~ .ledepevio-usugasemes {
  visibility: visible;
  animation: random-bg .5s linear infinite;
}

/* pulsating effect on button */
@keyframes grow {
  0% {
  transform: scale(1);
  }
  14% {
  transform: scale(1.3);
  }
  28% {
  transform: scale(1);
  }
  42% {
  transform: scale(1.3);
  }
  70% {
  transform: scale(1);
  }
}

@keyframes random-bg {
  from {
  filter: hue-rotate(0);
  }
  to {
  filter: hue-rotate(360deg);
  }
}

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

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

Второй вариант:

Красивая кнопка для сайта на CSS

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

HTML

Код

<button class="ducedevenua">
  <span>Кнопка с эффектом CSS</span>
</button>
<button class="ducedevenua center">
  <span>Кнопка при помощи CSS</span>
</button>
<button class="ducedevenua skew">
  <span>Кнопка с помощью CSS</span>
</button>

CSS

Код

.ducedevenua {
  background-color: #2f55a2;
  margin: 77px;
  text-transform: uppercase;
  font-size: 13px;
  color: #f7f1f1;
  border: none;
  width: 215px;
  height: 38px;
  position: relative;
  cursor: pointer;
  border: 1px solid #b6c4d8;
  border-radius: 4px;
}

.ducedevenua span {
  color: #fbf4f4;
  position: absolute;
  top: 0;
  left: 0;
  width: 215px;
  height: 38px;
  line-height: 38px;
  transition: all .5s;
}

.ducedevenua::before{
  content:"";
  display: block;
  background-color: #fff;
  width:0px;
  height:38px;
  position: absolute;
  top:0;
  left:0;
  transition: all .5s;
}

.center::before, .skew::before{
  left: 50%;
}

.skew{
  overflow: hidden;
}

.skew::before{
  transform:skewX(30deg);
}

.ducedevenua:hover::before{
  width:215px;
  left: 0%;
}

.ducedevenua:hover span {
  color: #252323;
}

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

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

Третий вариант:

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

See the Pen
Кнопки SVG трианглифицируют by Kocsten (@kocsten)
on CodePen.

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

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

СКАЧАТЬ

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

Kosten

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