» »

Стильный кнопка с эффектом наведение

Стильный кнопка с эффектом наведение

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

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

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

Код HTML устанавливаем по месту.

Код
<div class="btn-wrapper">
  <div class="btn-wrapper__container">
  <div class="btn-inner">
  <a class="btn-inner__text" href="http://zornet.ru/">ZORNET.RU</a>
  </div>
  </div>
  </div>

Можно поставить ниже кода, так как стиль заключен в style, если их убрать в начале и в конце, то в CSS прописываем.

Код
<style type="text/css">
  html,
  body {
  height: 100%;
  margin: 0;
  }
   
  body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("http://zornet.ru/zorner_ru_1/Abter/ep_naturalblack.png");
  }

  .btn-wrapper {
  width: 290px;
  height: 110px;
  position: relative;
  margin: 40px auto 0;
  }
   
  .btn-wrapper:hover .btn-inner {
  top: -4px;
  transform: scale(1, 1);
  cursor: pointer;
  }
   
  .btn-wrapper__container {
  border-bottom: 2px solid #15B5E2;
  position: absolute;
  width: 100%;
  height: 80px;
  }
   
  .btn-wrapper__container:before,
  .btn-wrapper__container:after {
  border-bottom: 2px solid #15B5E2;
  width: 96%;
  left: 2%;
  bottom: -8px;
  content: "";
  position: absolute;
  }
   
  .btn-wrapper__container:after {
  width: 92%;
  left: 4%;
  bottom: -14px;
  }
   
  .btn-wrapper__container .btn-inner {
  width: 104.2%;
  height: 100%;
  position: absolute;
  top: 20px;
  left: -2.1%;
  border: 2px solid #15B5E2;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 18px;
  background: #10131C;
  transform: scale(0.96, 0.96);
  transition: all .3s;
  z-index: 4;
  }
   
  .btn-wrapper__container .btn-inner__text {
  text-decoration: none;
  color: #15B5E2;
  }

  </style>

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

Просмотр демонстраций материала.

Источник: art-ucoz.ru
05.07.2017 Просмотров: 489 Комментарий: (5)

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

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

Комментарий: 5
Kosten
Kosten 05.07.2017 03:301
0
Когда устанавливать будите, то нужно будет фон убрать, так как он предназначен для демонстраций.

Код
background-image: url("http://zornet.ru/zorner_ru_1/Abter/ep_naturalblack.png");
-SAM-
-SAM- 05.07.2017 23:413
0
Просто стили дали лишние - от демо-страницы, сами стили кнопки начинаются от .btn-wrapper
Kosten
Kosten 06.07.2017 00:115
0
Вот как раз, на такой шаблон, где кнопка установлена по центру можно поставить и темный фон выбрать. Этот шаблон, что на одну страницу, но уже с красивыми эффектами.
First
First 05.07.2017 22:352
0
Цитата
Стильный кнопка
Звучит как "Гордый птичка" 11a , но выглядит красиво
Kosten
Kosten 06.07.2017 00:084
0
Но а что, красивая, как то уже стандартно, пусть будет стильной.
avatar