Август 2017
Автор: Рубрика: Верстка Комментариев нет

Добавим в блок шапки красивую кнопку для заказа


Добавим в блок шапки красивую кнопку для заказа

Сверстаем контейнер состоящий из заголовка, описания и кнопки.

Этот элемент располагается в шапке сбоку от изображения.

Шапка у лендинга состоит чаще всего из top-line, в котором находится логотип телефон и меню.

И вторая часть, которую сверстаем сейчас.

Больше время уделив кнопке, как основному элементу.

Начнем с добавления дива с классом header-flex обертка, для горизонтального и вертикального центрирования и центральной частью с классом flex-center.

Внутри будет класс container и второй класс row.

Возьмем весь контейнер в семь колонок bootstarp сетки col-sm-7.

Внутри колонки делаем композицию header-compos.

В композиции будет класс items, состоящий из заголовка h1 это seo заголовок, который может быть только один на странице, заголовки h2, h3 и т.д. их любое количество, описания тег p и кнопка button.

Код в index.html

Блок заголовка и кнопки css для сайта

Добавим стили и настроим кнопку

Для заголовка h1 задаем свойства все большие буквы text-transform: uppercase и размер шрифта.

Перейдем к настройке кнопки.

Размеры кнопки меняются padding: 15px 55px, это отступ вверх и вбок от края до слова.

Важное свойство letter-spacing: 3px, позволяет менять расстояния между буквами.

border-radius: 25px закругляем кнопку, если сделать ноль, то кнопка станет прямоугольная.

transition: background-color .2s ease этот параметр отвечает за плавность изменения цвета при нажатии.

Для настройки отступов в секции у .header-flex для кнопки добавим margin-top: 20px.

Стилизуем кнопки отдельно для каждой секции, если могут быть кнопки на сайте разных стилей.

Код кнопки main.sass

Чтобы у кнопки был сверху наложен градиент можно задать свойство background-image: linear-gradient (to right, #ffc410 0%, #ff9500 100%)

Псевдоэлементы для кнопок

  1. &:hover задает цвет для кнопки когда навели курсором мышки.
  2. &:focus меняет свойства когда кнопка в фокусе мышки.
  3. &:active При нажатии на кнопку мышкой. Подробно о классах.

Рассмотрим несколько красивых кнопок для сайта.

1 Сделаем объемную кнопку.

Оформить

Стиль в main.sass для кнопки

2 Сделаем объемную стандартного размера кнопку.

Заказать

Стиль кнопки а main.sass.

3 Кнопка для скачивания с анимацией внутри.

Скачать

Стиль кнопки в main.sass.

4 Кнопка при наведении нее подсвечивается снаружи.

В карзину

Стиль кнопки в main.sass.

Комментариев нет