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

Круглая кнопка 3D с эффектом нажатия на CSS

Отличная подборка на коллекцию 3D кнопок, которая создана с помощью CSS3, где имеет трехмерный переворачивающейся эффект при нажатии. Полностью создана на стилистике, где также закреплен отличный Hover эффект. По умолчанию она может быть под любым оттенком цвета, здесь выбор за веб мастером. Но только стоит на ее навести курсор, как она стразу проседает. Эти как большие и так можно выставить небольшими, но круглыми кнопками, что будут использовать тени на CSS3 для создания, и это все сделано для 3D-эффекта с понижающим эффектом.

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

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

Как пример, то здесь сменил оттенок, со светлого под темный.

Кнопка с нажатием CSS3

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

HTML

Код

<a href="http://zornet.ru/" class="milopdsaxru_thites">

ZORNET
ZorNet.Ru: Создание сайта

</a>

CSS

Код

a.milopdsaxru_thites {
  background: #36617f;
  color: #fbf6f6;
  text-shadow: 0 1px 0 #424040;
  text-decoration: none;
  font: bold 17px Arial;
  position: relative;
  display: inline-block;
  margin-right: 17px;
  padding: 17px;
  border-radius: 73px;
  width: 91px;
  height: 91px;
  outline: none;
  box-shadow: 0 8px 0 #19384e, 0 0 3px rgba(12, 12, 12, 0.21), 0 20px 20px #f5f3f3;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s cubic-bezier(0.42, 0, 0.46, 0.97);
}

a.milopdsaxru_thites span.zakresamla{ /* outermost text container */
  text-align: center;
  width: 100%;
  display: block;
  position: relative;
  top: 50%; /* center element */
  -webkit-transform: translateY(-50%); /* center element */
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}

a.milopdsaxru_thites span.zakresamla span.gresamidun{ /* top line */
  display: block;
  padding-bottom: 4px;
}

a.milopdsaxru_thites span.zakresamla span.kbasertulam {
  border-top: 1px solid #f3f0f0;
  padding-top: 3px;
  display: block;
  text-transform: uppercase;
  line-height: 15px;
  font-size: 65%;
}

a.milopdsaxru_thites:hover {
  background: #135c90;
  box-shadow: none;
  -ms-transform: translateY(8px);
  -webkit-transform: translate3D(0, 8px, 0);
  -moz-transform: translateY(8px);
  transform: translate3D(0, 8px, 0);
}

На этом все, где изначально можно посмотреть как работает.

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

12 Мая 2018 Загрузок: 1 Просмотров: 1931 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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