Сверстаем контейнер состоящий из заголовка, описания и кнопки.
Этот элемент располагается в шапке сбоку от изображения.
Шапка у лендинга состоит чаще всего из top-line, в котором находится логотип телефон и меню.
И вторая часть, которую сверстаем сейчас.
Больше время уделив кнопке, как основному элементу.
Начнем с добавления дива с классом header-flex обертка, для горизонтального и вертикального центрирования и центральной частью с классом flex-center.
Внутри будет класс container и второй класс row.
Возьмем весь контейнер в семь колонок bootstarp сетки col-sm-7.
Внутри колонки делаем композицию header-compos.
В композиции будет класс items, состоящий из заголовка h1 это seo заголовок, который может быть только один на странице, заголовки h2, h3 и т.д. их любое количество, описания тег p и кнопка button.
Код в index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="header-flex"> <div class="flex-centr"> <div class="container"> <div class="row"> <div class="col-sm-7"> <div class="header-compos"> <div class="items"> <h1 class="h1">Заголовок</h1> <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. По всей рукописи моей переписывается своих!</p> <a href="#" class="button2">Заказать</a> </div> </div> </div> </div> </div> </div> </div> |
Содержание статьи
Добавим стили и настроим кнопку
Для заголовка 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
.button display: inline-block border: none color: #fff text-decoration: none background-color: $accent padding: 15px 55px font-size: 20px text-transform: uppercase font-weight: 600 letter-spacing: 3px border-radius: 25px text-align: center position: relative outline: none &::after transition: background-color .2s ease position: absolute content: '' height: 6px bottom: 0 width: 92% background-color: darken($accent, 50%) opacity: .18 border-bottom-left-radius: 25px border-bottom-right-radius: 50px left: 12px &:focus, &:hover text-decoration: none color: #fff &:hover background-color: lighten($accent, 5%) &::after opacity: .22 &:active background-color: darken($accent, 5%) &::after opacity: .32 .items h1 text-transform: uppercase font-weight: 100 font-size: 50px margin: 0 border-bottom: 1px solid #000 .header-flex .button margin-top: 20px |
Чтобы у кнопки был сверху наложен градиент можно задать свойство background-image: linear-gradient (to right, #ffc410 0%, #ff9500 100%)
Псевдоэлементы для кнопок
- &:hover задает цвет для кнопки когда навели курсором мышки.
- &:focus меняет свойства когда кнопка в фокусе мышки.
- &:active При нажатии на кнопку мышкой. Подробно о классах.
Рассмотрим несколько красивых кнопок для сайта.
1 Сделаем объемную кнопку.
Стиль в main.sass для кнопки
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
.button11 display: inline-block color: rgba(255,255,255,1.8) text-decoration: none text-shadow: 0 0 1px rgb(3,43,58) padding: .8em 1.2em background: #0E8BB8 linear-gradient(#0A5E7D, #0E8BB8) box-shadow: 0 15px 12px -12px rgb(0,0,0), 0 -2px 0 -1px rgb(20,110,140), 0 -4px 0 -2px rgb(18,108,138), 0 -6px 0 -3px rgb(16,106,136), 0 -8px 0 -4px rgb(14,104,134), 0 -10px 0 -5px rgb(12,102,132), 0 -12px 0 -6px rgb(10,100,130) &:active margin: 0 calc(2px + 6px) 2px 0 padding: calc(.8em - 2px) calc(1.2em - 6px - 2px) border-left: 2px solid rgb(150,150,150) border-right: 2px solid rgb(150,150,150) border-bottom: 2px solid rgb(230,230,230) background: rgb(44,160,202) linear-gradient(rgb(62,184,229), rgb(44,160,202)) box-shadow: none -webkit-transform: translate(6px, -6px) transform: translate(6px, -6px) |
2 Сделаем объемную стандартного размера кнопку.
Стиль кнопки а main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
a.button display: inline-block font-weight: bold color: #fff text-decoration: none text-shadow: 0 -1px rgba(0,0,0,.5) user-select: none padding: .7em 1.5em border: 1px solid rgb(80,32,0) border-radius: 5px outline: none background: rgb(147,80,36) linear-gradient(rgb(106,58,26), rgb(147,80,36) 80%) box-shadow: 0 6px rgb(86,38,6), 0 3px 15px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5) transition: .2s .button:hover background: rgb(167,91,41) linear-gradient(rgb(126,69,31), rgb(167,91,41) 80%) .button:active background: rgb(120,63,25) linear-gradient(rgb(120,63,25) 20%, rgb(167,91,41)) box-shadow: 0 2px rgb(86,38,6), 0 1px 6px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.3), inset 0 0 3px rgba(255,255,255,.5) -webkit-transform: translate(0, 4px) transform: translate(0, 4px) |
3 Кнопка для скачивания с анимацией внутри.
Стиль кнопки в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
a.button position: relative display: inline-block font-size: 100% font-weight: 700 color: #fff text-shadow: #053852 -1px 1px, #053852 1px 1px, #053852 1px -1px, #053852 -1px -1px text-decoration: none user-select: none padding: .3em .7em outline: none border-radius: 7px background: #053852 repeating-linear-gradient(135deg, #053852, #053852 10px, #1679ad 10px, #1679ad 20px, #053852 20px); box-shadow: inset -2px -2px rgba(0,0,0,.3), inset 2px 2px rgba(255,255,255,.3) transition: background-position 999999s, color 999999s, text-shadow 999999s a.button:hover, a.button2:focus text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px background: #0175b1 repeating-linear-gradient(135deg, #0175b1, #0175b1 10px, #8fd2f5 10px, #8fd2f5 20px, #0175b1 20px) no-repeat; background-size: 1000% 100% a.button:hover background-position: 0 0 a.button:focus color: rgba(255,255,255,0) text-shadow: rgba(1,117,177,0) -1px 1px, rgba(1,117,177,0) 1px 1px, rgba(1,117,177,0) 1px -1px, rgba(1,117,177,0) -1px -1px background-position: 900% 0 transition: background-position linear 600s, color .5s, text-shadow .5s a.button:after content: "загрузка\2026" position: absolute top: 0 left: 0 padding: .3em .7em color: rgba(0,0,0,0) text-shadow: none transition: 999999s a.button:focus:after color: #fff text-shadow: #0175b1 -1px 1px, #0175b1 1px 1px, #0175b1 1px -1px, #0175b1 -1px -1px transition: .5s |
4 Кнопка при наведении нее подсвечивается снаружи.
Стиль кнопки в main.sass.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
a.button display: inline-block width: 5em height: 2em line-height: 2em vertical-align: middle text-align: center text-decoration: none user-select: none color: rgb(0,0,0) outline: none border: 1px solid rgba(0,0,0,.4) border-top-color: rgba(0,0,0,.3) border-radius: 2px background: linear-gradient(rgb(255,255,255), rgb(240,240,240)) box-shadow: 0 0 3px rgba(0,0,0,0) inset, 0 1px 1px 1px rgba(255,255,255,.2), 0 -1px 1px 1px rgba(0,0,0,0) transition: .2s ease-in-out a.button:hover:not(:active) box-shadow: 0 0 3px rgba(0,0,0,0) inset, 0 1px 1px 1px rgba(0,255,255,.5), 0 -1px 1px 1px rgba(0,255,255,.5) a.button:active background: linear-gradient(rgb(250,250,250), rgb(235,235,235)) box-shadow: 0 0 3px rgba(0,0,0,.5) inset, 0 1px 1px 1px rgba(255,255,255,.4), 0 -1px 1px 1px rgba(0,0,0,.1) |