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

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

На любом сайте присутствуют кнопки, а какие они будут, от веб разработчика зависит. Здесь представлено 2 разных эффекта, что выполнены на CSS. Безусловно на интернет ресурсе кнопки HTML являются важным элементом для различного дизайна. Они могут привлекаться под разную функцию, это как переход по страницам, так и под функцию скачать архив. Теперь кратко про материал, которые созданы на чистой стилистике.

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

Так они реально будут выглядеть при установках:

Здесь разберем по отдельности, где ставим.

А это уже получаем тот эффект, который еще меняет оттенок цвета.

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

HTML

Код

<div class="posvunamed">
  <p>Левая сторона</p>
  <span class="danesed-kaunordered"></span>
</div>

<div class="posvunamed1">
  <p>Правая сторона</p>
  <span class="danesed-kaunordered1"></span>
</div>

CSS

Код

.posvunamed, .posvunamed1 {
  border: 3px solid #265d7b;
  width: 243px;
  margin: 17px auto;
  text-align: center;
  font-weight: 900;
  font-size: 21px;
  padding: 14px;
  cursor: pointer;
  position: relative;
  color: #f9f3f3;
  font-family: arial;
  overflow: hidden;
  border-radius: 100px;
}

.posvunamed p,.posvunamed1 p{
  position: relative;
  z-index: 1;
}

.danesed-kaunordered:before{
  content: "";
  background: #15343c;;
  top: -2px;
  left: 0px;
  position: absolute;
  width: 276px;
  height: 70px;
  transition: all 0.7s;
}

.danesed-kaunordered:after{
  content: "";
  background: #157975;
  top:-2px;
  left:285px;
  position: absolute;
  width: 280px;
  height: 68px;
  transition: all 0.9s;
}

.posvunamed:hover .danesed-kaunordered:before{
  left: -285px;
  transition: all 0.9s;
}

.posvunamed:hover .danesed-kaunordered:after{
  left: 0px;
  transition: all 0.5s;
}

/* 2 */
.danesed-kaunordered1:before{
  content: "";
  background: #10313a;
  top:-2px;
  left:0px;
  position: absolute;
  width: 275px;
  height: 68px;
  transition: all 0.7s;
}

.danesed-kaunordered1:after{
  content: "";
  background: #00bfb6;
  top: -2px;
  left:-285px;
  position: absolute;
  width: 276px;
  height: 68px;
  transition: all 0.9s;
}

.posvunamed1:hover .danesed-kaunordered1:before{
  left: 290px;
  transition: all 0.7s;
}

.posvunamed1:hover .danesed-kaunordered1:after{
  left: 0px;;
  transition: all 0.7s;
}

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

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

28 Ноября 2018 Просмотров: 1227 Комментариев: (0)

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

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

Kosten

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