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

Кнопки с уникальным эффектом при помощи CSS

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

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

Так смотрится на темном, но здесь цветовую гамму можно сделать намного ярче:

HTML

Код

ZORNET.RU 1ZORNET.RU 2ZORNET.RU 3ZORNET.RU 4

CSS

Код

.zornet_ru_gsamig {text-align:center}
.zornet_ru_gsamig span {
  display: inline-block;
  margin: 12px;
  padding: 16px 29px;
  cursor: pointer;
  border-radius: 7px;
  color: #f1eded;
  transition: .2s cubic-bezier(0, 0, 0.82, 1.02);
}
.zornet_ru_gsamig span:nth-child(1) {background: #634b3c;}
.zornet_ru_gsamig span:nth-child(1):hover {
  box-shadow: 0 0 0 2px #fdf4f4, 0 0 0 4px #5f4a3d;
}
.zornet_ru_gsamig span:nth-child(2) {background:#6cb7a2}
.zornet_ru_gsamig span:nth-child(2):hover {
  box-shadow: 195px 0 0 0 rgba(12, 12, 12, 0.25) inset;
}
.zornet_ru_gsamig span:nth-child(3) {background:#af7b2c}
.zornet_ru_gsamig span:nth-child(3):hover {
  box-shadow: 0 0 0 2px #9c712f inset, 0 0 0 4px #f9f1f1 inset;
}
.zornet_ru_gsamig span:nth-child(4) {
  background: #ad5a32;
  position: relative;
  top: 0;
  left: 0;
}
.zornet_ru_gsamig span:nth-child(4):hover {
  box-shadow: 2px 2px white, 4px 4px #9e502b;
  top: -4px;
  left: -4px;
}

Спасибо пользователю workman, за предоставленый материал.

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

19 Февраля 2018 Просмотров: 2341 Комментариев: (0)

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

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

Kosten

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