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

Цветная кнопка с переплетом при помощи CSS

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

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

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

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

HTML

Код

<div class="kulowingothis_iconceptave">
<button>Zornet.Ru</button>
</div>

CSS

Код

.kulowingothis_iconceptave {
  cursor: pointer !important;
  left: 49%;
  margin: 0 auto 0 -273px;
  max-width: 537px;
  position: absolute;
  top: 41vh;
  width: 100%;
}

.kulowingothis_iconceptave:after { background: #0188fd none repeat scroll 0 0;
  border-radius: 74px;
  content: "";
  height: 100%;
  position: absolute;
  right: -21px;
  top: 8px;
  width: 100%;
  box-shadow:1px 1px 2px rgba(16, 16, 16, 0.11);
  z-index: -1;}

.kulowingothis_iconceptave:after {
  background: #1b78c7 none repeat scroll 0 0;
  border-radius: 81px;
  content: "";
  height: 100%;
  position: absolute;
  right: -19px;
  top: 10px;
  width: 100%;
  box-shadow: 1px 1px 2px rgba(19, 18, 18, 0.08);
  z-index: -1;
}

.kulowingothis_iconceptave button {
  background: rgb(243, 243, 243) none repeat scroll 0 0;
  border: medium none;
  border-radius: 75px;
  color: rgb(255, 153, 49);
  font-size: 89px;
  font-weight: bold;
  letter-spacing: 4px;
  max-width: 536px;
  padding: 9px;
  width: 100%;
  box-shadow: -19px 2px 1px #96402a;
  text-shadow: -1px 3px 1px rgb(160, 77, 34);
  cursor:pointer;
}

.kulowingothis_iconceptave button:after { background: rgb(248, 171, 15) none repeat scroll 0 0;
  border-radius: 75px;
  content: "";
  height: 100%;
  position: absolute;
  right: -17px;
  top: -8px;
  width: 100%;
  box-shadow:1px 1px 2px rgba(0,0,0,0.1);
  z-index: -1;}
  .kulowingothis_iconceptave button:before { background: #04bc8a none repeat scroll 0 0;
  border-radius: 75px;
  content: "";
  height: 100%;
  position: absolute;
  left: -21px;
  top: -15px;
  box-shadow:1px 1px 2px rgba(27, 27, 27, 0.14);
  width: 100%;
  z-index: -1;}

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

Кнопка, это безусловно наиболее полезные элементы для веб-сайта или веб приложение, в котором содержится большая часть команды вызова для действий на вашем сайте и веб-приложение.

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

26 Июля 2018 Загрузок: 1 Просмотров: 1150 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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