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

Красивый 3D эффект нажатие кнопки в CSS

Красивые выполнены по дизайну 3D кнопки при помощи CSS, которые идут в несколько оттенков цвета и имеют оригинальный эффект нажатие на элемент. Где вы можете создать изначальный эффект при наведении, но когда сделаете клик, то визуально просматривается нажатие кнопки, что оригинально смотрится. Здесь идет 4 оттенка цвета, это сделано для того, чтоб по цветовой гамме не подгонять.

Хотя для этого закреплены стили, где уже сам веб-разработчик может решить под каким оттенком он видит такой дизайна на своем сайте. Это отличное решение для различных онлайн генераторов, что можно было изначально видеть кнопку, так как при открытии страницы стилистика в 3D стразу бросается в глаза, а точнее она более заметна по своему дизайну от других.

Так идет по умолчанию и при нажатие на элемент:

Потрясающие 3D кнопки с эффектом нажатия

HTML

Код

<a href="#" class="forma-knopki shadow animate siniy-otenok">Zornet.Ru</a>
<a href="#" class="forma-knopki shadow animate alaya-gamma">Zornet.Ru #1</a>
<a href="#" class="forma-knopki shadow animate zelenaya-palitra">Zornet.Ru #3</a>
<a href="#" class="forma-knopki shadow animate siniy-dizayn">Zornet.Ru #4</a>

CSS

Код

.animate{
  transition: all 0.1s;
  -webkit-transition: all 0.1s;
}

.forma-knopki{
  position: relative;
  padding: 10px 40px;
  margin: 0px 10px 10px 0px;
  float: left;
  border-radius: 10px;
  font-family: 'Pacifico', cursive;
  font-size: 25px;
  color: #FFF;
  text-decoration: none;
}

.siniy-otenok {
  background-color: #2592da;
  border-bottom: 5px solid #207ebb;
  text-shadow: 0px -2px #1d7dbb;
}

.alaya-gamma {
  background-color: #e43e2d;
  border-bottom: 5px solid #a02e23;
  text-shadow: 0px -2px #cc2d1d;
}

.zelenaya-palitra {
  background-color: #54a718;
  border-bottom: 5px solid #406527;
  text-shadow: 0px -2px #5b9632;
}

.siniy-dizayn {
  background-color: #d431c9;
  border-bottom: 5px solid #8a1792;
  text-shadow: 0px -2px #992e9a;
}

.forma-knopki:active{
  transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
  border-bottom: 1px solid;
}

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

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

17 Сентября 2019 Загрузок: 2 Просмотров: 1641 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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