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

Классные hover-эффекты кнопок на CSS

Анимационные кнопки, где некоторые при hover-эффекте показывают знаки, остальные при наведении курсора показывают стильные эффекты на чистом CSS. Это простая стилистика, что отлично подойдет на темный или светлый формат сайта или блога. Разве здесь есть несколько ссылок в формате PNG, которые показывают заданные знаки. Также все они отлично редактируются по смене оттенка цвета или заданного эффекта, где можно самостоятельно задать скорость показа.

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

Как пример одного эффекта:

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

Установка:

HTML

Код

<div id="packagin">
<a id="sandagenos" class="animations" href="#">Кнопка #1<img id="arrow-hover" src="http://zornet.ru/Images/izobrazheniye/conmaster.png"/></a>

  <div class="animations" id="vtoraya">
  <div id="slide"></div>
  <a href="#">Кнопка #2 на CSS!</a>
  </div>

  <div class="animations" id="ahirdus">
  <div id="circle"></div>
  <a href="#">Кнопка #3 на CSS!</a>
  </div>

  <div class="animations" id="cetvega">
  <div id="underline"></div>
  <a href="#">Кнопка #4 на CSS!</a>
  </div>

  <div class="animations" id="pyataya">
  <div id="translate"></div>
  <a href="#">Кнопка #5 на CSS!</a>
  </div>

  <div class="animations" id="shestaya">
  <div id="podsan"></div>
  <a href="#">Кнопка #6 на CSS!</a>
  </div>

  <div class="animations" id="sedumaya">
  <div id="dekigasun"><img src="http://zornet.ru/Images/izobrazheniye/busercvas.png" alt="" /></div>
  <a href="#">Кнопка #7 на CSS!</a>
  </div>
</div>

CSS

Код

#packagin {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 150px 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.animations {
  display: inline-flex;
  height: 40px;
  width: 150px;
  border: 2px solid #608ca9;
  margin: 20px 20px 20px 20px;
  color: #e4f2ff;
  /* text-transform: uppercase; */
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #e8ffff;
  text-decoration: none;
  letter-spacing: 1px;
}

#arrow-hover {
  width: 15px;
  height: 10px;
  position: absolute;
  transform: translateX(60px);
  opacity: 0;
  -webkit-transition: all .25s cubic-bezier(.14, .59, 1, 1.01);
  transition: all .15s cubic-bezier(.14, .59, 1, 1.01);
  margin: 0;
  padding: 0 5px;
}

a#sandagenos:hover img {
  width: 15px;
  opacity: 1;
  transform: translateX(50px);
}

#vtoraya {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#vtoraya a {
  position: relative;
  transition: all .35s ease-Out;
}

#slide {
  width: 100%;
  height: 100%;
  left: -200px;
  background: #BFC0C0;
  position: absolute;
  transition: all .35s ease-Out;
  bottom: 0;
}

#vtoraya:hover #slide {
  left: 0;
}

#vtoraya:hover a {
  color: #464a54;
}

#ahirdus {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#ahirdus a {
  position: relative;
  transition: all .45s ease-Out;
}

#circle {
  width: 0%;
  height: 0%;
  opacity: 0;
  line-height: 40px;
  border-radius: 50%;
  background: #1c3c3c;
  position: absolute;
  transition: all .5s ease-Out;
  top: 20px;
  left: 70px;
}

#ahirdus:hover #circle {
  width: 200%;
  height: 500%;
  opacity: 1;
  top: -70px;
  left: -70px;
}

#ahirdus:hover a {
  color: #dbdfef;
}

#cetvega {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#cetvega a {
  position: relative;
  transition: all .45s ease-Out;
}

#underline {
  width: 100%;
  height: 2.5px;
  margin-top: 15px;
  align-self: flex-end;
  left: -200px;
  background: #BFC0C0;
  position: absolute;
  transition: all .3s ease-Out;
  bottom: 0;
}

#cetvega:hover #underline {
  left: 0;
}

#pyataya {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#pyataya a {
  position: relative;
  transition: all .45s ease-Out;
}

#translate {
  transform: rotate(50deg);
  width: 100%;
  height: 250%;
  left: -200px;
  top: -30px;
  background: #BFC0C0;
  position: absolute;
  transition: all .3s ease-Out;
}

#pyataya:hover #translate {
  left: 0;
}

#pyataya:hover a {
  color: #2D3142;
}

#shestaya {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#shestaya a {
  position: relative;
  transition: all .45s ease-Out;
}

#podsan {
  width: 0;
  height: 0;
  opacity: 0;
  left: 70px;
  top: 20px;
  transform: rotate(0deg);
  background: none;
  position: absolute;
  transition: all .5s ease-Out;
}

#shestaya:hover #podsan {
  width: 200%;
  height: 500%;
  opacity: 1;
  left: -70px;
  top: -70px;
  background: #BFC0C0;
  transform: rotate(80deg);
}

#shestaya:hover a {
  color: #2D3142;
}

#sedumaya {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

#sedumaya a {
  position: relative;
  left: 0;
  transition: all .35s ease-Out;
}

#dekigasun {
  width: 100%;
  height: 100%;
  background: #BFC0C0;
  left: -200px;
  position: absolute;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .35s ease-Out;
  bottom: 0;
}

#sedumaya img {
  width: 20px;
  height: auto;
}

#sedumaya:hover #dekigasun {
  left: 0;
}

#sedumaya:hover a {
  left: 150px;
}

@media screen and (min-width:1000px) {
  h1 {
  font-size: 2.2em;
  }
  #packagin {
  width: 50%;
  }
}

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

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

29 Апреля 2020 Загрузок: 1 Просмотров: 1194 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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