Делаем изящную CTA-кнопку на сайт для повышения конверсии
CTA-кнопка (от англ. Call To Action – Призыв К Действию) – неотъемлемый и, наверно, самый главный атрибут продающего сайта.
Сегодня мы поэтапно и с пояснениями сделаем вот такую вот сексуальную CTA-кнопку, на которую так и хочется нажать
Начнем с html-кода самой кнопки:
<a class="cta" href="#">Заказать расчет</a>Далее, добавляем стиль кнопки:
a.cta {
display: inline-block; /* Делаем возможным размещение кнопки в строку */
width: 15em; /* Ширина */
font-size: 120%; /* Размер текста на 20% больше исходного */
font-weight: 700; /* Жирный текст */
color: #000; /* Цвет текста – черный */
text-decoration: none; /* Убираем подчеркивание */
text-align: center; /* Размещаем текст по центру кнопки */
padding: .55em 0; /* Отступы, определяют высотку кнопки */
border-radius: 6px; /* Закругляем края кнопки */
background: linear-gradient(#91c61f, #8dab00); /* см. ниже */
}*В качестве фона кнопки делаем градиент со следующими цветами:
| #91c61f |
| #8dab00 |
Вот что у нас получилось:
Теперь будем её поэтапно украшать.
Для начала сделаем окантовку. Для этого, добавляем к нашему стилю следующие строки:
border: 1px solid; /* Назначаем обводку шириной в 1 пиксель */
border-color: #91c61f #8dab00 #8dab00 #91c61f; /* Обозначаем поочередно цвета обводки */Для обводки берем те же цвета, что и использовались для градиента: и поочередно назначаем цвета верхней, правой, нижней и левой границы. Для левой и нижней сторон выбираем первый цвет нашего градиента, а для правой и нижней – второй.
Пока ничего особо не изменилось, окантовка едва заметна. И чтобы добиться желаемого эффекта, добавим еще одну хитрость:
box-shadow: inset rgba(255, 255, 255, .5) 1px 1px;Добавляем тень белого цвета с прозрачностью 50%. С помощью ключевого слова inset определяем тень внутри блока, а с помощью значений 1px 1px делаем сдвиг по X и Y на 1 пиксель внутрь блока.
Вот что в итоге получилось. Мы с помощью обводки и тени создали эффект объемности кнопки:
Почти закончили. Теперь добавляем тексту эффект гравировки из прошлого урока:
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);Реализуем мы его с помощью обычной текстовой тени белого цвета, опущенной на 1 пиксель вниз от текста. Вот что получилось:
И последним шагом добавляем главную изюминку этой кнопки в виде шума.
Реализуем мы его с помощью обычной текстуры:
Немного меняем наш стиль.
Вместо:
background: linear-gradient(#91c61f, #8dab00); background: url(http://cosmostudio.su/white.jpg), linear-gradient(#91c61f, #8dab00);
background-size: auto 200%; /* Размер фоновой картинки 200% от высоты кнопки */
background-repeat: repeat-x; /* Фон повторяется по горизонтали */
background-blend-mode: multiply; /* Режим смешения слоев фона */С помощью значений свойства background-size можно регулировать размер шума. Например, если выставить значение "auto 150%", то шум будет мельче, а если "auto 300%", то, шум на кнопке будет, соответственно, крупнее.
Также при желании можем добавить стиль кнопки при наведении. Просто добавляем к объекту с псевдоэлементом hover свойства, на которые мы будем менять стиль кнопки при наведении:
a.cta:hover {
background: url(http://cosmostudio.su/white.jpg), linear-gradient(#7fad1c, #7e9801);
background-size: auto 200%;
}Теперь приводим финальный код.
<head>...</head>:
<style>
a.cta {
display: inline-block;
width: 15em;
font-size: 120%;
font-weight: 700;
color: #000;
text-shadow: 0 1px 0 rgba(255, 255, 255, .75);
text-decoration: none;
text-align: center;
padding: .55em 0;
border: 1px solid;
border-color: #91c61f #8dab00 #8dab00 #91c61f;
border-radius: 6px;
background: url(http://cosmostudio.su/white.jpg), linear-gradient(#91c61f, #8dab00);
background-size: auto 200%;
background-repeat: repeat-x;
background-blend-mode: multiply;
box-shadow: inset rgba(255, 255, 255, .5) 1px 1px;
}
a.cta:hover {
background: url(http://cosmostudio.su/white.jpg), linear-gradient(#7fad1c, #7e9801);
background-size: auto 200%;
}
</style><a class="cta" href="#">Заказать расчет</a>Меняя цвета градиентов, можно экспериментировать и настроить кнопку под любую цветовую схему вашего сайта:
| Следующая запись→