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

Кнопка с анимацией и hover эффектом в CSS

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

Что и сделал, это выставил на 2 пикселя обвод, и прописал тени по всем сторонам, что на светлом фоне белый обвод отлично видно и вписался в дизайн.

Если вам нужен проще стиль дизайна, то устанавливайте как идет на демонстраций. Вообще не чего лишнего, это код под название, где идет 2 класса, что один отвечает за дизайн, второй на анимацию. Где если вам нужно что-то поправить или снизить скорость, или наоборот увеличить, то вся настройка происходит в прикрепленной стилистике.

Как пример, вот после установки кнопки, где идет светлый фон и там по заданному времени проблеск происходит, то стоит навести клик, так палитра цвета меняется.

Кнопка с красивым эффектом при наведение клика

Кнопка с красивым эффектом при наведение клика

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

HTML

Код

<button class="kudemogad gtasupotin-mavenag">
ZORNET.RU
</button>

CSS

Код

.kudemogad {
  margin: auto;
  display: inline-block;
  padding: 18px 36px;
  border: 2px solid #dedbdb;
  border-radius: 5px;
  transition: .4s;
  cursor: pointer;
  box-shadow: 0px 0px 7px 1px rgba(70, 65, 65, 0.53), 1px 3px 5px 3px rgba(0, 0, 0, 0.01);
}
.kudemogad.gtasupotin-mavenag:hover {
  background-color: #15b5b4;
  border-color: #0ca2a2;
  color: #fbf2f2;
}
.gtasupotin-mavenag {
  background: -webkit-linear-gradient(315deg, rgba(19, 18, 18, 0) 0%, transparent 30%, #10cac9 40%, #11b1b0 50%, #0edcdb 60%, transparent 70%, rgba(21, 20, 20, 0) 100%);
  background-repeat: no-repeat;
  background-position: 100px;
  background-size: 300%;
  animation: light 4s ease 2s infinite;
  -webkit-animation: light 4s ease 2s infinite;
}
@keyframes light {
  0% {
  background-position: -400px;
  }
  30%,
  100% {
  background-position: 100px;
  }
}
@-webkit-keyframes light {
  0% {
  background-position: -400px;
  }
  30%,
  100% {
  background-position: 100px;
  }
}
.animated-link.active,
.animated-link:hover{
  background-color: transparent;
  animation: none;
}

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

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

17 Февраля 2019 Загрузок: 1 Просмотров: 1273 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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