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

Кнопки с фоновый эффектом скольжения CSS

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

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

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

На темном фоне:

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

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

HTML

Код

<div class="sebrand-makarenes">
  <div class="conketun sategied">
  <p>Наведите клик #1</p>
  </div>

  <div class="conketun conketun-2">
  <p>Наведите клик #2</p>
  </div>

  <div class="conketun conketun-3">
  <p>Наведите клик #3</p>
  </div>

  <div class="conketun conketun-4">
  <p>Наведите клик #4</p>
  </div>
</div>

CSS

Код

.sebrand-makarenes{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%)
}

.conketun {
  width: 214px;
  height: 45px;
  line-height: 45px;
  border: 2px solid #f1e9e9;
  margin: 28px 0;
  position: relative;
  cursor: pointer;
  transition: all 1s ease;
  overflow: hidden;
}

.conketun > p {
  text-align: center;
  text-transform: uppercase;
  color: #e8ecec;
  font-weight: bold;
  font-size: 14px;
  position: relative;
  z-index: 1;
  transition: all 1s ease;
}

/* sliders */
.conketun:before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: #d0d4d4;
  position: absolute;
  transition: all 1s ease;
}

/* Top Slider */
.sategied:before{
  top: -65px;
  left: 0;
}

/* Left Slider */
.conketun-2:before{
  top: 0;
  left: -225px;
}

/* Right Slider */
.conketun-3:before{
  top: 0;
  left: 225px;
}

/* Bottom Slider */
.conketun-4:before{
  top: 65px;
  left: 0;
}

/* Hover Effect */
.sategied:hover:before,
.conketun-4:hover:before{
  top: 0;
}

.conketun-2:hover:before,
.conketun-3:hover:before{
  left: 0;
}

.conketun:hover p{
  color: #0d615d;
}

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

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

03 Декабря 2018 Просмотров: 1221 Комментариев: (0)

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

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

Kosten

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