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

10 эффектов CSS для кнопок при наведении

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

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

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

Пример анимации:

1. При наведении на кнопку фон скользит слева и покрывает всю поверхность, а при наведении фон смещается вправо и исчезает.
2. Фон скользит сверху и покрывает целое, а при наведении происходит перемещение вниз и исчезает.
3. Фон скользит слева, чтобы охватить все, а при наведении вверх фон смещается вправо. Эффект представляет собой рисунок с диагональным фоном.
4. Эта кнопка, в котором фон производится по наклонному спуску.
5. Фон отображается слева направо от центра при наведении.
6. В противоположность вышеуказанному, при наведении курсора фон отображается слева направо от центра.
7. Слева при наведении, справа при наведении, где animation используется для одновременного выполнения при наведении.
8. Наведение вверх, вверх и вниз, при помощи animation выполняются одновременно с наведением.
9. Основное движение заключается в отображении фона слева направо при наведении, но это движение для подготовки двух типов фона и отображения их в разное время при наведении.
10. Последний также должен отображать два типа фона с зависанием в разные моменты времени, и это тип, который будет отображаться слева и справа.

CSS Hover Fill Анимация

Вы можете реализовать каждое движение, добавив или изменив код реализации каждой анимации.

HTML

Код

<div class="kalepumad-kanepkas">
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad01" href="#" onclick="return false;">ZORNET.RU #1</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad02" href="#" onclick="return false;">ZORNET.RU #2</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad03" href="#" onclick="return false;">ZORNET.RU #3</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad04" href="#" onclick="return false;">ZORNET.RU #4</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad05" href="#" onclick="return false;">ZORNET.RU #5</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad06" href="#" onclick="return false;">ZORNET.RU #6</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad07" href="#" onclick="return false;">ZORNET.RU #7</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad08" href="#" onclick="return false;">ZORNET.RU #8</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad09" href="#" onclick="return false;">ZORNET.RU #9</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad10" href="#" onclick="return false;">ZORNET.RU #10</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad11" href="#" onclick="return false;">ZORNET.RU #11</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad12" href="#" onclick="return false;">ZORNET.RU #12</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad13" href="#" onclick="return false;">ZORNET.RU #13</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad14" href="#" onclick="return false;">ZORNET.RU #14</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad15" href="#" onclick="return false;">ZORNET.RU #15</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad16" href="#" onclick="return false;">ZORNET.RU #16</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad17" href="#" onclick="return false;">ZORNET.RU #17</a>
  </div>
  <div class="gedasunivem">
  <a class="kupemulesad kupemulesad18" href="#" onclick="return false;">ZORNET.RU #18</a>
  </div>
</div>

CSS

Код

.kalepumad-kanepkas {
  padding: 0 0 2em;
}
.gedasunivem {
  padding: 2em 0;
  text-align: center;
  box-sizing: border-box;
}
@media screen and (min-width:768px) {
  .kalepumad-kanepkas {
  display: flex;
  flex-wrap: wrap;
  }
  .gedasunivem {
  width: calc(100% / 3);
  }
}
@media screen and (min-width:1024px) {
  .gedasunivem {
  width: calc(100% / 4);
  padding: 3em 0;
  }
}
.kupemulesad {
  position: relative;
  display: inline-block;
  padding: 17px 35px;
  border: 2px solid #312d2d;
  color: #252323;
  font-size: 18px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  transition: .4s;
}
.kupemulesad::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  background: #292828;
  transition: transform .3s;
}
.kupemulesad:hover {
  color: #f9f4f4;
}

.kupemulesad01::before {
  transform-origin: right top;
  transform: scale(0, 1);
}
.kupemulesad01:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.kupemulesad02::before {
  transform-origin: left top;
  transform: scale(0, 1);
}
.kupemulesad02:hover::before {
  transform-origin: right top;
  transform: scale(1, 1);
}

.kupemulesad03::before {
  transform-origin: left bottom;
  transform: scale(1, 0);
}
.kupemulesad03:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

.kupemulesad04::before {
  transform-origin: left top;
  transform: scale(1, 0);
}
.kupemulesad04:hover::before {
  transform-origin: left bottom;
  transform: scale(1, 1);
}

.kupemulesad05 {
  overflow: hidden;
}
.kupemulesad05::before {
  right: auto;
  bottom: auto;
  width: 120%;
  height: 100%;
  transform-origin: right top;
  transform: skewX(-30deg) scale(0, 1);
}
.kupemulesad05:hover::before {
  transform-origin: left top;
  transform: skewX(-30deg) scale(1, 1);
}

.kupemulesad06 {
  overflow: hidden;
}
.kupemulesad06::before {
  right: auto;
  bottom: auto;
  width: 120%;
  height: 100%;
  transform-origin: left top;
  transform: skewX(-30deg) scale(0, 1);
}
.kupemulesad06:hover::before {
  transform-origin: right top;
  transform: skewX(-30deg) scale(1, 1);
}

.kupemulesad07 {
  overflow: hidden;
}
.kupemulesad07::before {
  left: -5%;
  right: auto;
  bottom: auto;
  width: 110%;
  height: 180%;
  transform-origin: left bottom;
  transform: skewY(-10deg) scale(1, 0);
}
.kupemulesad07:hover::before {
  transform-origin: left top;
  transform: skewY(-10deg) scale(1, 1);
}

.kupemulesad08 {
  overflow: hidden;
}
.kupemulesad08::before {
  left: -5%;
  right: auto;
  bottom: auto;
  width: 110%;
  height: 180%;
  transform-origin: left top;
  transform: skewY(-10deg) scale(1, 0);
}
.kupemulesad08:hover::before {
  transform-origin: left bottom;
  transform: skewY(-10deg) scale(1, 1);
}

.kupemulesad09::before {
  transform-origin: center center;
  transform: scale(0, 1);
}
.kupemulesad09:hover::before {
  transform: scale(1, 1);
}

.kupemulesad10::before {
  transform-origin: center center;
  transform: scale(1, 0);
}
.kupemulesad10:hover::before {
  transform: scale(1, 1);
}

.kupemulesad11::before,
.kupemulesad11::after {
  position: absolute;
  top: 0;
  z-index: -1;
  content: '';
  width: 50%;
  height: 100%;
  background: #292828;
  transform: scale(0, 1);
  transition: transform .3s;
}
.kupemulesad11::before {
  left: 0;
  transform-origin: left top;
}
.kupemulesad11::after {
  right: 0;
  transform-origin: right top;
}
.kupemulesad11:hover::before,
.kupemulesad11:hover::after {
  transform: scale(1, 1);
}

.kupemulesad12::before,
.kupemulesad12::after {
  position: absolute;
  left: 0;
  z-index: -1;
  content: '';
  width: 100%;
  height: 50%;
  background: #292828;
  transform: scale(1, 0);
  transition: transform .3s;
}
.kupemulesad12::before {
  top: 0;
  transform-origin: left top;
}
.kupemulesad12::after {
  bottom: 0;
  transform-origin: left bottom;
}
.kupemulesad12:hover::before,
.kupemulesad12:hover::after {
  transform: scale(1, 1);
}

.kupemulesad13::before {
  transform: scale(0, 1);
}
.kupemulesad13:hover {
  animation: hover13 .6s forwards;
}
.kupemulesad13:hover::before {
  animation: hover13-in .4s forwards alternate, hover13-out .4s .4s forwards alternate;
}
@keyframes hover13 {
  0%, 100% {
  color: #292828;
  }
  50% {
  color: #f9f4f4;
  }
}
@keyframes hover13-in {
  0% {
  transform-origin: left top;
  transform: scale(0, 1);
  }
  100% {
  transform-origin: left top;
  transform: scale(1, 1);
  }
}
@keyframes hover13-out {
  0% {
  transform-origin: right top;
  transform: scale(1, 1);
  }
  100% {
  transform-origin: right top;
  transform: scale(0, 1);
  }
}

.kupemulesad14::before {
  transform: scale(0, 1);
}
.kupemulesad14:hover {
  animation: hover14 .6s forwards;
}
.kupemulesad14:hover::before {
  animation: hover14-in .3s forwards alternate, hover14-out .3s .3s forwards alternate;
}
@keyframes hover14 {
  0%, 100% {
  color: #292828;
  }
  50% {
  color: #f9f4f4;
  }
}
@keyframes hover14-in {
  0% {
  transform-origin: right top;
  transform: scale(0, 1);
  }
  100% {
  transform-origin: right top;
  transform: scale(1, 1);
  }
}
@keyframes hover14-out {
  0% {
  transform-origin: left top;
  transform: scale(1, 1);
  }
  100% {
  transform-origin: left top;
  transform: scale(0, 1);
  }
}

.kupemulesad15::before {
  transform: scale(1, 0);
}
.kupemulesad15:hover {
  animation: hover15 .6s forwards;
}
.kupemulesad15:hover::before {
  animation: hover15-in .3s forwards alternate, hover15-out .3s .3s forwards alternate;
}
@keyframes hover15 {
  0%, 100% {
  color: #292828;
  }
  50% {
  color: #f9f4f4;
  }
}
@keyframes hover15-in {
  0% {
  transform-origin: left top;
  transform: scale(1, 0);
  }
  100% {
  transform-origin: left top;
  transform: scale(1, 1);
  }
}
@keyframes hover15-out {
  0% {
  transform-origin: left bottom;
  transform: scale(1, 1);
  }
  100% {
  transform-origin: left bottom;
  transform: scale(1, 0);
  }
}

.kupemulesad16::before {
  transform: scale(1, 0);
}
.kupemulesad16:hover {
  animation: hover16 .6s forwards;
}
.kupemulesad16:hover::before {
  animation: hover16-in .3s forwards alternate, hover16-out .3s .3s forwards alternate;
}
@keyframes hover16 {
  0%, 100% {
  color: #292828;
  }
  50% {
  color: #f9f4f4;
  }
}
@keyframes hover16-in {
  0% {
  transform-origin: left bottom;
  transform: scale(1, 0);
  }
  100% {
  transform-origin: left bottom;
  transform: scale(1, 1);
  }
}
@keyframes hover16-out {
  0% {
  transform-origin: left top;
  transform: scale(1, 1);
  }
  100% {
  transform-origin: left top;
  transform: scale(1, 0);
  }
}

.kupemulesad17::before,
.kupemulesad17::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
.kupemulesad17::before {
  background: #635f5f;
}
.kupemulesad17::after {
  background: #292828;
}
.kupemulesad17:hover::before,
.kupemulesad17:hover::after {
  transform-origin: left top;
  transform: scale(1, 1);
}
.kupemulesad17:hover::after {
  transition-delay: .3s;
}

.kupemulesad18::before,
.kupemulesad18::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  content: '';
  transform: scale(0, 1);
}
.kupemulesad18::before {
  background: #635f5f;
  transform-origin: right top;
  transition: none;
}
.kupemulesad18::after {
  background: #292828;
  opacity: 0;
  transform-origin: left top;
  transition: transform 0s .3s, opacity .3s;
}
.kupemulesad18:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
  transition: transform .3s;
}
.kupemulesad18:hover::after {
  opacity: 1;
  transform-origin: right top;
  transform: scale(1, 1);
  transition: transform .4s .4s, opacity .4s;
}

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

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

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

26 Мая 2019 Загрузок: 2 Просмотров: 2699 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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