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

Отзывчивый дизайн кнопки при помощи CSS

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

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

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

HTML

Код

<div id="kingaprope-blue">
  <a class="subscribepervayn-ghost subscribepervayn-white subscribepervayn-align" href="#">
  ZorNet.Ru: Портал
  </a>
</div>

<div id="kingaprope-gray">
  <a class="subscribepervayn-ghost subscribepervayn-blue subscribepervayn-align" href="#">
  ZorNet.Ru: Портал
  </a>
</div>

CSS

Код

.subscribepervayn-align { position: relative; top: 45%; }
.subscribepervayn-ghost {
  display: block;
  width: 340px; width: 34rem;
  height: 66px; height: 6.6rem;
  font: 700 20px/66px "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; font: 2.0rem/6.6rem;
  letter-spacing: 0.01rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: all .16s ease;
  margin: 0 auto;
}
.subscribepervayn-blue { color: #06c; border: 2px solid #06c; }
.subscribepervayn-blue:hover, .subscribepervayn-blue:active, .subscribepervayn-blue:focus {
  color: #fff;
  background-color: #06c;
  border: 2px solid #06c;
}
.subscribepervayn-white { color: #fff; border: 2px solid #fff; }
.subscribepervayn-white:hover, .subscribepervayn-white:active, .subscribepervayn-white:focus {
  color: #06c;
  background-color: #fff;
  border: 2px solid #fff;
}

@media screen and (max-width: 420px) { /* iPhone Landscape */
  .subscribepervayn-ghost {
  width: 290px; width: 29.0rem;
  height: 50px; height: 5.0rem;
  font-size: 16px; font-size: 1.6rem;
  line-height: 50px; line-height: 5.0rem;
  }
}

/* Backgrounds */

div#kingaprope-blue { background-color: #06c; height: 50vh; }
div#kingaprope-gray { background-color: #eee; height: 50vh; }

Самостоятельно выставляем тот оттенок цвета, что вам нужен по дизайн.

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

12 Июля 2018 Просмотров: 1210 Комментариев: (0)

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

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

Kosten

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