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

4 эффекта скользящего фона для кнопок

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

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

Чтобы освоить эти эффекты наведения кнопок, а также понять несколько основных концепций CSS, то в одном из них, это CSS Relative и Absolute, а в другом идет элемент CSS Before.

- CSS позиции -

Положение: относительное;
Элемент позиционируется относительно своей собственной позиции.

Position: absolute
Элемент позиционируется относительно своего родительского элемента (здесь позиция родительских элементов должна быть относительной).

- До и после псевдоэлементов -

Какая польза от псевдо-элементов до и после?

С помощью элементов до и после мы можем вставлять содержимое до и после любого элемента, не добавляя никаких элементов в структуру документа.

Также можете посмотреть функциональность кнопок:

HTML

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

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

Код

<div class="vadsekupo-kesaonalu">
  <div class="knopka nuseoka">
  <p>Кнопка фонового эффекта №1</p>
  </div>

  <div class="knopka gdacan">
  <p>Кнопка фонового эффекта №2</p>
  </div>

  <div class="knopka logepog">
  <p>Кнопка фонового эффекта №3</p>
  </div>

  <div class="knopka nudesav">
  <p>Кнопка фонового эффекта №4</p>
  </div>

CSS

Код

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

.knopka {
  width: 215px;
  height: 48px;
  line-height: 50px;
  border: 2px solid #efeeee;
  margin: 25px 0;
  position: relative;
  cursor: pointer;
  transition: all 1s ease;
  overflow: hidden;
  border-radius: 3px;
}

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

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

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

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

.logepog:before{
  top: 0;
  left: 215px;
}

.nudesav:before{
  top: 60px;
  left: 0;
}

.nuseoka:hover:before,
.nudesav:hover:before{
  top: 0;
}

.gdacan:hover:before,
.logepog:hover:before{
  left: 0;
}

.knopka:hover p {
  color: #0bafa7;
}

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

Видео по теме эффекта наведения кнопки

Теперь стиль текста внутри элементов div, сделав текст жирным шрифтом, прописными буквами и центром, где установите для его значения позиции значение relative и значение z-index, 1 higher value чтобы текст был над всеми элементами, когда бы мы ни наводили курсор на элементы div.

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

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

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

СКАЧАТЬ

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

Kosten

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