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

Эффект простого наведение для кнопки

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

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

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

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

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

Эффект наведения на кнопку с одним цветом HTML и CSS

Кнопка с красивым эффектом при наведение клика

HTML

Рассмотрим элемент div с class:desutepeb-kimenseng этим элементом div и внутри него, рассмотрим четыре элемента div с каждым элементом, где div и внутри него, рассмотрим с текстом и два span элемента с различными классами.

Код

<div class="desutepeb-kimenseng">
  <div class="dokuvas">
  <p>Дизайн</p>
  <span class="angectung-pseudelem"></span>
  <span class="aseagonal-usinglebode"></span>
  </div>
  <div class="dokuvas">
  <p>Эффекты</p>
  <span class="angectung-pseudelem"></span>
  <span class="aseagonal-usinglebode"></span>
  </div>
  <div class="dokuvas">
  <p>Скрипты</p>
  <span class="angectung-pseudelem"></span>
  <span class="aseagonal-usinglebode"></span>
  </div>
  <div class="dokuvas">
  <p>Шаблоны</p>
  <span class="angectung-pseudelem"></span>
  <span class="aseagonal-usinglebode"></span>
  </div>
</div>

CSS

Код

.desutepeb-kimenseng {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 840px;
}

.desutepeb-kimenseng .dokuvas {
  width: 170px;
  margin: 0 20px;
  padding: 15px 0;
  text-align: center;
  float: left;
  cursor: pointer;
  background: #eaeaf1;
  position: relative;
}

.dokuvas p {
  color: #2b2f6c;
  font-weight: 900;
  font-size: 14px;
  text-transform: uppercase;
}

.angectung-pseudelem:before {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  top: -6px;
  left: -7px;
  background: #eaeaf1;
  transition: all 0.5s ease;
}

.angectung-pseudelem:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 3px;
  bottom: -6px;
  right: -7px;
  background: #eaeaf1;
  transition: all 0.5s ease;
}

.aseagonal-usinglebode:before {
  content: "";
  position: absolute;
  top: -4px;
  left: -7px;
  width: 3px;
  height: 25px;
  background: #eaeaf1;
  transition: all 0.5s ease;
}

.aseagonal-usinglebode:after {
  content: "";
  position: absolute;
  bottom: -4px;
  right: -7px;
  width: 3px;
  height: 25px;
  background: #eaeaf1;
  transition: all 0.5s ease;
}

.dokuvas:hover .angectung-pseudelem:before,
.dokuvas:hover .angectung-pseudelem:after {
  width: 184px;
  transition: all 0.5s ease;
}

.dokuvas:hover .aseagonal-usinglebode:before,
.dokuvas:hover .aseagonal-usinglebode:after {
  height: 57px;
  transition: all 0.5s ease;
}

@media screen and (max-width: 780px) {
  .desutepeb-kimenseng {
  width: 180px;
  }
  .desutepeb-kimenseng .dokuvas {
  margin: 15px 0;
  }
}

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

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

04 Июня 2019 Просмотров: 861 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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