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

Стиль кнопки с заполнением фона на CSS

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

По умолчанию здесь углы закруглены, но все это настраивается в CSS, что закреплен в коду, и вообще все работает на чистом CSS3, что безусловно будет большим плюсом. Главное теперь куда ее определить, так как функционально она от стандарта не отличается. А точнее выставлена под ссылку на переход, где изначально светлый обвод шел на 4 пикселя, что в 2 раза уменьшил, и совершенно по другому визуальна стала смотреться.

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

HTML

Код

<div class="signaltonoi-torefronts">
<a class="rougedoze-nsogenericen" href="http://zornet.ru">ZORNET.RU</a>
</div>

CSS

Код

.signaltonoi-torefronts {
  width: 100%;
  height: 100vh;
  background: linear-gradient(to left, #0b54dc, #f90bb6);
}
.rougedoze-nsogenericen {
  position: absolute;
  top: 63%;
  left: 47%;
  transform: translate(-49%, -49%);
  width: 221px;
  height: 59px;
  text-align: center;
  line-height: 59px;
  font-family: sans-serif;
  font-size: 23px;
  color: #f7ebeb;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 5px;
  transition: .6s;
  border: 2px solid #e0d7d7;
  border-radius: 60px;
  box-shadow: 0 7px 18px rgba(33, 31, 31, 0.56);
  overflow: hidden;
}
.rougedoze-nsogenericen::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, #115be4, #f5136e);
  z-index: -1;
  border-radius: 85px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s ease-in-out;
}
.rougedoze-nsogenericen:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

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

Видео обзор:

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

04 Августа 2018 Просмотров: 1386 Комментариев: (0)

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

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

Kosten

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