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

20 кнопок hover-эффекта на чистом CSS

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

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

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

Что понять в какой палитре по умолчанию идет, то этот вид по умолчанию прописан:

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

HTML

Код

<div class="nudgeted-samkesam">
  <h1>20 эффектов наведения кнопок</h1>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-1">Наведение на кнопку №1</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-2">Наведение на кнопку №2</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-3">Наведение на кнопку №3</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-4">Наведение на кнопку №4</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-5">Наведение на кнопку №5</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-6">Наведение на кнопку №6</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-7">Наведение на кнопку №7</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-8">Наведение на кнопку №8</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-9">Наведение на кнопку №9</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-10">Наведение на кнопку №10</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-11">Наведение на кнопку №11</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-12">Наведение на кнопку №12</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-13">Наведение на кнопку №13</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-14">Наведение на кнопку №14</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-15">Наведение на кнопку №15</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-16">Наведение на кнопку №16</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-17">Наведение на кнопку №17</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-18">Наведение на кнопку №18</a>
  </div>
  </div>
  <div class="gesamikas">
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-19">Наведение на кнопку №19</a>
  </div>
  <div class="six kadmes">
  <a href="#" class="compevequ-gabmean" id="compevequ-gabmean-20">Наведение на кнопку №20</a>
  </div>
  </div>
  </div>

CSS

Код

.six { width: 49.2%; }

.kadmes {
  display: block;
  float:left;
  margin: 1% 0 1% 1.6%;
}

.kadmes:first-of-type {
  margin-left: 0;
}

.nudgeted-samkesam{
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

/* CLEARFIX */

.gesamikas:before,
.gesamikas:after {
  content: " ";
  display: table;
}

.gesamikas:after {
  clear: both;
}

.gesamikas {
  *zoom: 1;
}

/* ALL compevequ-gabmeanS */

.compevequ-gabmean{
  display: inline-block;
  padding: 20px 50px;
  margin: 20px 0;
  position: relative;
  color: #f1f7f9;
}

/* compevequ-gabmean 1 */

#compevequ-gabmean-1{
  border: 2px solid #2d4358;
  color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-1:before{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: -100%;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-1:hover{
  color: #f1f7f9;
}

#compevequ-gabmean-1:hover:before{
  left: 0;
}

/* compevequ-gabmean 2 */

#compevequ-gabmean-2{
  border: 2px solid #2d4358;
  color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-2:before{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: -100%;
  left: 0;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-2:hover{
  color: #f1f7f9;
}

#compevequ-gabmean-2:hover:before{
  top: 0;
}

/* compevequ-gabmean 3 */

#compevequ-gabmean-3{
  border: 2px solid #2d4358;
  color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-3:before, #compevequ-gabmean-3:after{
  content: "";
  z-index: -1;
  position: absolute;
  width: 50%;
  height: 100%;
  top: 0;
  left: -50%;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-3:after{
  left: 100%;
}

#compevequ-gabmean-3:hover{
  color: #f1f7f9;
}

#compevequ-gabmean-3:hover:before{
  left: 0;
}

#compevequ-gabmean-3:hover:after{
  left: 50%;
}

/* compevequ-gabmean 4 */

#compevequ-gabmean-4{
  border: 2px solid #2d4358;
  color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-4:before, #compevequ-gabmean-4:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  left: 0;
  top: 50%;
  z-index: -1;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-4:after{
  top: auto;
  bottom: 50%;
}

#compevequ-gabmean-4:hover{
  color: #f1f7f9;
}

#compevequ-gabmean-4:hover:before{
  height: 50%;
}

#compevequ-gabmean-4:hover:after{
  height: 50%;
}

/* compevequ-gabmean 5 */

#compevequ-gabmean-5{
  color: #2d4358;
  overflow: hidden;
}

#compevequ-gabmean-5:before, #compevequ-gabmean-5:after{
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #2d4358;
  top: 0;
  left: -100%;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-5:after{
  bottom: 0 !important;
  top: auto !important;
  right: -100%;
  left: auto;
}

#compevequ-gabmean-5:hover:before{
  left: 0;
}

#compevequ-gabmean-5:hover:after{
  right: 0;
}

/* compevequ-gabmean 6 */

#compevequ-gabmean-6{
  border: 2px solid #2d4358;
  color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-6:before, #compevequ-gabmean-6:after{
  content: "";
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 50%;
  top: -50%;
  left: 0;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-6:after{
  top: 100%;
}

#compevequ-gabmean-6:hover{
  color: #f1f7f9;
}

#compevequ-gabmean-6:hover:before{
  top: 0;
}

#compevequ-gabmean-6:hover:after{
  top: 50%;
}

/* compevequ-gabmean 7 */

#compevequ-gabmean-7{
  -webkit-perspective: 50px;
  -moz-perspective: 50px;
  -ms-perspective: 50px;
  perspective: 50px;
  background-color: #2d4358;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

#compevequ-gabmean-7:hover{
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  -o-transform: rotateX(360deg);
  transform: rotateX(360deg);
}

/* compevequ-gabmean 8 */

#compevequ-gabmean-8{
  background-color: #2d4358;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-8:hover{
  -webkit-box-shadow: 0px 0px 10px #2d4358;
  box-shadow: 0px 0px 10px #2d4358;
}

/* compevequ-gabmean 9 */

#compevequ-gabmean-9{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-9:hover{
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* compevequ-gabmean 10 */

#compevequ-gabmean-10{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-10:hover{
  -webkit-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
}

/* compevequ-gabmean 11 */

#compevequ-gabmean-11{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-11:hover{
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  transform: translateX(10px);
}

/* compevequ-gabmean 12 */

#compevequ-gabmean-12{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-12:hover{
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  -o-transform: translateX(-10px);
  transform: translateX(-10px);
}

/* compevequ-gabmean 13 */

#compevequ-gabmean-13{
  background-color: #2d4358;
  -webkit-font-smoothing: antialiased;
}

#compevequ-gabmean-13:hover{
  animation: wobbleud 0.5s linear infinite;
}

@keyframes wobbleud{
  0%{
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  }

  25%{
  -webkit-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
  }

  75%{
  -webkit-transform: translateY(5px);
  -ms-transform: translateY(5px);
  -o-transform: translateY(5px);
  transform: translateY(5px);
  }

  100%{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  }
}
/* compevequ-gabmean 14 */

#compevequ-gabmean-14{
  background-color: #2d4358;
}

#compevequ-gabmean-14:hover{
  animation: wobblelr 0.5s linear infinite;
}

@keyframes wobblelr{
  0%{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  }

  25%{
  -webkit-transform: translateX(-5px);
  -ms-transform: translateX(-5px);
  -o-transform: translateX(-5px);
  transform: translateX(-5px);
  }

  75%{
  -webkit-transform: translateX(5px);
  -ms-transform: translateX(5px);
  -o-transform: translateX(5px);
  transform: translateX(5px);
  }

  100%{
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  }
}

/* compevequ-gabmean 15 */

#compevequ-gabmean-15{
  background-color: rgba(52, 73, 94, 1);
}

#compevequ-gabmean-15:hover{
  animation: bgchange 2s linear infinite;
}

@keyframes bgchange{
  0%{
  background-color: rgba(52, 73, 94, 1);
  }

  50%{
  background-color: rgba(52, 73, 94, 0.7);
  }

  100%{
  background-color: rgba(52, 73, 94, 1);
  }
}

/* compevequ-gabmean 16 */

#compevequ-gabmean-16{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-16:hover{
  border-radius: 15px;
}

/* compevequ-gabmean 17 */

#compevequ-gabmean-17{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-17:before{
  content: "";
  position: absolute;
  top: calc(50% - 15px);
  left: 0;
  border-right: 15px solid #2d4358;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-17:hover{
  -webkit-transform: translateX(15px);
  -ms-transform: translateX(15px);
  -o-transform: translateX(15px);
  transform: translateX(15px);
}

#compevequ-gabmean-17:hover:before{
  left: -15px;
}

/* compevequ-gabmean 18 */

#compevequ-gabmean-18{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-perspective: 100px;
  -moz-perspective: 100px;
  -ms-perspective: 100px;
  perspective: 100px;
  -webkit-perspective-origin: right;
  -moz-perspective-origin: right;
  -ms-perspective-origin: right;
  perspective-origin: right;
}

#compevequ-gabmean-18:after{
  content: "X";
  line-height: 60px;
  position: absolute;
  top: 0;
  right: -60px;
  width: 60px;
  height: 100%;
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: left;
  -moz-transform-origin: left;
  -ms-transform-origin: left;
  -o-transform-origin: left;
  transform-origin: left;
}

#compevequ-gabmean-18:hover:after{
  -webkit-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

/* compevequ-gabmean 19 */

#compevequ-gabmean-19{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-19:hover{
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  transform: rotate(5deg);
}

/* compevequ-gabmean 20 */

#compevequ-gabmean-20{
  background-color: #2d4358;
  -webkit-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#compevequ-gabmean-20:hover{
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
  -o-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

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

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

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

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

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

СКАЧАТЬ

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

Kosten

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