ZorNet.Ru — сайт для вебмастера » HTML и CSS » 5 простых hover-эффекта для кнопки на CSS3

5 простых hover-эффекта для кнопки на CSS3

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

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

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

HTML

Код

<div class="dakolxrynka">
  <button class="kivurmanes-1">ZORNET.RU 1</button>
  <button class="kivurmanes-2">ZORNET.RU 2</button>
  <button class="kivurmanes-3">ZORNET.RU 3</button>
  <button class="kivurmanes-4">ZORNET.RU 4</button>
  <button class="kivurmanes-5">ZORNET.RU 5</button>
</div>

CSS

Код

.dakolxrynka {
  padding: 2.5em;
}

button,
button::after {
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

button {
  background: none;
  border: 3px solid #f5efef;
  border-radius: 5px;
  color: #eae9e9;
  display: block;
  font-size: 1.6em;
  font-weight: bold;
  margin: 1em auto;
  padding: 2em 6em;
  position: relative;
  text-transform: uppercase;
  cursor:pointer;
}

button::before,
button::after {
  background: #f1f0f0;
  content: '';
  position: absolute;
  z-index: -1;
}

button:hover {
  color: #2e56cc;
}

/* BUTTON 1 */
.kivurmanes-1::after {
  height: 0;
  left: 0;
  top: 0;
  width: 100%;
}

.kivurmanes-1:hover:after {
  height: 100%;
}

/* BUTTON 2 */
.kivurmanes-2::after {
  height: 100%;
  left: 0;
  top: 0;
  width: 0;
}

.kivurmanes-2:hover:after {
  width: 100%;
}

/* BUTTON 3 */
.kivurmanes-3::after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.kivurmanes-3:hover:after {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

/* BUTTON 4 */
.kivurmanes-4::before {
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.kivurmanes-4::after {
  background: #2e73cc;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}

.kivurmanes-4:hover:after {
  height: 0;
  left: 50%;
  top: 50%;
  width: 0;
}

.kivurmanes-5 {
  overflow: hidden;
}

.kivurmanes-5::after {
  height: 100%;
  left: -37%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.7s;
  transform-origin: top left;
  width: 0;
}

.kivurmanes-5:hover:after {
  height: 99.8%;
  width: 138%;
}

Чтоб понятно в стилистике было по эффектам, то все стили обозначены под нумерацией.

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

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

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

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

Kosten

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