ZorNet.Ru — сайт для вебмастера » HTML и CSS » Эффект скользящего фона кнопок на CSS

Эффект скользящего фона кнопок на CSS

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

С помощью элементов до и после мы можем вставлять содержимое любого элемента, где не добавляя никаких элементов в структуру документа. Давайте создадим div-обертку таким образом, чтобы он всегда был в центре браузера, где устанавливая его под значение absolute, topа left, где задействуем метод translate свойства transform, поместите div-обертку точно в центр браузера.

Рассмотрим элемент div с class:meresaku-domunad этим элементом div и внутри него, рассмотрим четыре элемента div с двумя разными классами, один из которых является общим классом для всех кнопок. Общий класс используется для стилизации общих стилей для всех кнопок, а различные классы используются для размещения ползунков в правильном положении и внутри всех кнопок рассмотрим текст.

Кнопка фонового скользящего анимационного эффекта

HTML

Код

<div class="meresaku-domunad">
  <div class="whelmin loksob-1">
  <p>ZorNet.Ru — сайт №1</p>
  </div>

  <div class="whelmin loksob-2">
  <p>ZorNet.Ru — сайт №2</p>
  </div>

  <div class="whelmin loksob-3">
  <p>ZorNet.Ru — сайт №3</p>
  </div>

  <div class="whelmin loksob-4">
  <p>ZorNet.Ru — сайт №4</p>
  </div>
</div>

CSS

Код

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

.whelmin {
  width: 215px;
  height: 48px;
  line-height: 48px;
  border: 2px solid #cac7c7;
  margin: 15px 0;
  position: relative;
  cursor: pointer;
  transition: all 1s ease;
  overflow: hidden;
  border-radius: 100px;
}

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

.whelmin:before{
  content: "";
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
  transition: all 1s ease;
}

.loksob-1:before{
  top: -60px;
  left: 0;
}

.loksob-2:before{
  top: 0;
  left: -215px;
}

.loksob-3:before {
  top: 0;
  left: 215px;
}

.loksob-4:before{
  top: 60px;
  left: 0;
}

.loksob-1:hover:before,
.loksob-4:hover:before{
  top: 0;
}

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

.whelmin:hover p{
  color: #0d807a;
}

Теперь стиль текста внутри элементов div, сделав текст жирным шрифтом, где прописан буквами по центру. Используя псевдоэлемент Before, мы можем создавать заданные трюки, устанавливая значения его ширины и высоты 100% равными его родительскому элементу.

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

04 Июня 2019 Загрузок: 1 Просмотров: 1152 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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