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

Популярный эффект кнопки при наведение CSS

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

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

При проверке на работоспособность материала.

HTML

Код

<button class="zamisakim" type="submit">ZORNET.RU</button>
<button class="zamisakim tylosamub">ZORNET.RU </button>
<button class="zamisakim slidebottomleft">ZORNET.RU</button>
<button class="zamisakim angleinleft">ZORNET.RU </button>

<button class="zamisakim bouncein" type="submit">ZORNET.RU</button>
<button class="zamisakim tylosamub bouncein">ZORNET.RU #6</button>
<button class="zamisakim slidebottomleft bouncein">ZORNET.RU #7</button>
<button class="zamisakim angleinleft bouncein">ZORNET.RU</button>

CSS

Код

.zamisakim {
  color: #f9f6f6;
  outline: none;
  background: #16161700;
  border: none;
  border-bottom: 4px solid #f5eeee;
  letter-spacing: 0.0625em;
  padding: 8px 10px;
  text-transform: uppercase;
  font: bold 16px 'Bitter', sans-serif;
  line-height: 2;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: all .5s;
}

.zamisakim:before,
.zamisakim:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c;
  z-index: -1;
  transform: translate3D(0,-100%,0);
  transition: all .5s;
}

.zamisakim:before {
  background: #225d9c;
  z-index: -2;
  transform: translate3D(0,0,0);
}

.zamisakim:hover{
  color: white;
}

.zamisakim:hover:after{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.tylosamub:after{
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

.tylosamub:hover:after{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.slidebottomleft:after{
  transform: translate3D(-100%,100%,0);
}

.slidebottomleft:hover:after{
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.angleinleft:after{
  width: 200%;
  transform-origin: 0 bottom;
  transform: translate3D(-50%,0,0) rotate(-50deg);
}

.angleinleft:hover:after{
  transform: rotate(0deg);
  transition: all .5s;
}

.snulopasreb {
  border: 1px solid #e2dbdb;
  border-bottom: 4px solid #efeaea;
}

.snulopasreb:before,
.snulopasreb:after{
  background: #259f6c;
  transform: translate3D(0,-100%,0);
}

.snulopasreb:after{
  transform: translate3D(0,100%,0);
}

.snulopasreb:hover:before,
.snulopasreb:hover:after{
  transform: translate3D(0,-50%,0);
  transition: all .5s;
}

.snulopasreb:hover:after{
  transform: translate3D(0,50%,0);
}

.curtainup{
  transform-style: preserve-3d;
}

.curtainup:before,
.curtainup:after{
  transform-origin: center center;
  transform: scale(1,0);
}

.curtainup:hover:before,
.curtainup:hover:after{
  transform: scale(1);
  border-radius: 0;
}

Базовая настройка каждой из кнопок, которые вы видите выше, где они одинаковы.

Каждая кнопка состоит из:

1. Основная кнопка элемент контейнера, чтобы установить и с прозрачным фоном , чтобы позволить его псевдо элементы позади , чтобы показать до конца. position:relative

2. Перед псевдоэлементом, чтобы действовать как сплошной цвет фона кнопки. В некоторых случаях мы будем анимировать этот слой. z-index: -2

3. После псевдоэлемента с наложением элемента. Во всех случаях мы будем анимировать этот слой для создания интересных эффектов зависания. z-index: -1:before

Такая настройка позволяет тексту кнопки всегда оставаться на вершине, пока мы анимационный слои под главной кнопкой.

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

27 Мая 2018 Просмотров: 1427 Комментариев: (0)

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

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

Kosten

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