ZorNet.Ru — сайт для вебмастера » HTML и CSS » Привлекательная 3D кнопка при помощи CSS3

Привлекательная 3D кнопка при помощи CSS3

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

Что главное, это смена цвета, которая меняется в нескольких моментах, что не нужно погружаться и искать стилистику, здесь все очень просто и доступно, этим такой формат в отличие от других по доступности в формирование. В этом материале демонстрируется пример кнопки, которая представлена как 3D объект с простой анимацией, используя только на стилистике CSS3.

Она имеет закругленные углы, которые достигаются с помощью свойства border-radius, где сам веб мастер задает объем закругление. Также этот элемент выглядит необычно и не походе на другие, про которые больше говорят, как плоские. Но здесь не секрет, что в реальности это иллюзия достигается с помощью свойства box-shadow. Чтобы создать анимацию этой кнопки, используйте свойство CSS перехода и активный псевдокласс класса.

При проверке была изменена палитра цвета, что так будет смотреться:

В синем оттенке:

В зеленом оттенке:

Это при Demo проверке:

Стандартная кнопка в отличном дизайн 3D формате

Эффект перехода или нажатие:

Если пользователь нажимает кнопку, три события происходят одновременно:

1. Положение вертикальной тени увеличивается, что уменьшает иллюзию глубины.
2. Тень вокруг кнопки становится меньше, это показывает, что кнопка теряет свою глубину в уменьшение 3D.
3. Кнопка идет на несколько пикселей вниз, чтобы сделать иллюзию, в том случай, если она была нажата на поверхность.

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

HTML

1. Вариант:

Код

<a class="dezilpom-gsunadka" href="http://zornet.ru">ZORNET.RU</a>

2. Вариант:

Код

<button type="submit" class="dezilpom-gsunadka">ZORNET.RU</button>

CSS

Код

.dezilpom-gsunadka {
  position: relative;
  background-color: #4c4949;
  -webkit-border-radius: 10px;
  border: none;
  border-radius: 10px;
  -webkit-box-shadow: 0px 8px 0px #878787, 0px 8px 20px #191818;
  box-shadow: 0px 8px 0px #333030, 0px 8px 20px #1d1b1b;
  color: #f7f4f4;
  display: inline-block;
  font-size: 41px;
  padding: 3px 9px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: all 200ms ease;
  -moz-transition: all 200ms ease;
  -ms-transition: all 200ms ease;
  -o-transition: all 200ms ease;
  transition: all 200ms ease;
  cursor: pointer;
  text-shadow: 0 1px 0 #171616;
}

.dezilpom-gsunadka:active {
  -webkit-box-shadow: 0px 2px 0px #7d7878, 0px 1px 7px #171616;
  box-shadow: 0px 1px 0px #7d7878, 0px 2px 7px #171616;
  top: 7px;
}

В этом мануале по подключение кнопки, было задействованы HTML и CSS.

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

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

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

10 Июня 2018 Просмотров: 1633 Комментариев: (0)

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

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

Kosten

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