Делаем изящную CTA-кнопку на сайт для повышения конверсии

Делаем изящную CTA-кнопку на сайт для повышения конверсии
CTA-кнопка (от англ. Call To Action – Призыв К Действию) – неотъемлемый и, наверно, самый главный атрибут продающего сайта.
Сегодня мы поэтапно и с пояснениями сделаем вот такую вот сексуальную CTA-кнопку, на которую так и хочется нажать  relieved

Заказать расчет

Начнем с 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; /* Режим смешения слоев фона */
Теперь пояснения. Современный язык стилей CSS3 позволяет реализовать самые нетривиальные задачи в области оформления элементов. Вместо обычного градиента мы делаем комбинированный фон: ссылка на изображение текстуры + градиент. Следующими свойствами определяем размер фоновой картинки, повторение фона и режим смешения. Нам нужно скрыть белые части фона картинки и оставить тёмные – шум. Для этого подойдет режим 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>
<body>...</body>:
<a class="cta" href="#">Заказать расчет</a>


Меняя цвета градиентов, можно экспериментировать и настроить кнопку под любую цветовую схему вашего сайта:

Купить в один клик

Отправить заявку

Загрузить файл

Получить консультацию





| Следующая запись→

©

12-04-2019, 13:37

(Просмотров: 502)


РАЗДЕЛЫ САЙТА
  • Портфолио
  • Лендинг
  • Интернет-магазин
  • Персональный сайт
  • Сайт-портфолио
  • Портал
  • Веб-дизайн
  • Полиграфический дизайн
  • Услуги по развитию сайта
  • Восстановление фото
  • КОНТАКТЫ
    E-mail:
    webcosmostudio.su

    Телефон:


  • Вакансии
  • БЛОГ
    Простой эффект гравировки для текста с помощью CSS
    Делаем изящную CTA-кнопку на сайт для повышения конверсии