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

Современная 3D кнопка с эффектом на CSS3

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

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

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

Здесь в несколько кликов произведено изменение,:

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

HTML

Код

<div>
<h1>ZorNet.Ru</h1>
<button id="ksanrezu_milpodem">ZorNet.Ru: Создание сайта</button>
  <br>
  <br>
  <button id="ksanrezu_milpodem">ZorNet.Ru: Скрипт и шаблон</button>
</div>

CSS

Код

#ksanrezu_milpodem {
  outline: none;
  border: none;
  cursor: pointer;
  display: block;
  position: relative;
  background-color: #eca120;
  font-size: 18px;
  font-weight: 300px;
  color: #fbf8f8;
  text-transform: uppercase;
  padding: 25px 48px;
  margin: 0 auto;
  border-radius: 17px;
  box-shadow: 0 7px #cc8e24;
  text-shadow: 0 1px 0 #423e3e;
}

#ksanrezu_milpodem:hover {
  box-shadow: 0 4px #d6921f;
  top: 1.9px;
}

#ksanrezu_milpodem:active {
  box-shadow: none;
  top: 7px;
}

Здесь самостоятельно можете преобразовать дизайн кнопок.

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

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

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

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

Kosten

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