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

Глянцевый 3D эффект кнопки с помощью CSS

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

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

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

Здесь видим уже законченный эффект поворота, что почти по стилю не изменилось.

Вот как раз тот блеск, который будет происходить с одной стороны и перекатываться на другую, где прекрасно виден.

Градиент для кнопки на стилях CSS

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

HTML

Код

<div class="neginesam_bactoneka">ZORNET.RU</div>

CSS

Код

.neginesam_bactoneka {
  background: linear-gradient(to right, #26a3f7, #e61ece);
  color: #f7f7f7;
  --width: 263px;
  --height: calc(var(--width) / 3);
  width: var(--width);
  height: var(--height);
  text-align: center;
  line-height: var(--height);
  font-size: calc(var(--height) / 2.5);
  font-family: sans-serif;
  letter-spacing: 0.1em;
  border: 1px solid #828284;
  border-radius: 2em;
  transform: perspective(500px) rotateY(-15deg);
  text-shadow: 5px 2px 1px rgba(14, 14, 14, 0.24);
  box-shadow: 2px 0 0 5px rgba(243, 243, 243, 0.68);
  transition: 0.5s;
  position: relative;
  overflow: hidden;
}

.neginesam_bactoneka:hover {
  transform: perspective(500px) rotateY(15deg);
  text-shadow: -6px 3px 2px rgba(16, 16, 16, 0.22);
  box-shadow: -2px 0 0 5px rgba(16, 16, 16, 0.22);
}

.neginesam_bactoneka::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, white, transparent);
  left: -100%;
  transition: 0.5s;
}

.neginesam_bactoneka:hover::before {
  left: 100%;
}

Аналогично можно поставить те параметры по ширине и длине в стилистике CSS, где абсолютна все редакция, но кроме ключевого слова, который в самом коде вписывать нужно.

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

03 Октября 2018 Просмотров: 1770 Комментариев: (0)

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

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

Kosten

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