Пользовательское оформление input

Плагин customInput позволит оформить теги input так, как вздумается дизайнеру.

Сервисы социальных кнопок для сайта

Рассмотрим самые интересные веб-сервисы предоставляющие кнопки популярных социальных сетей, сервисов закладок в «одном флаконе». Не нужно будет ставить для каждой соц. сети их персональный код кнопки, сервисы выдадут вам один код сразу для всех.

Кнопка покупки на CSS3

Кнопка при наведении на которую происходит отображение скрытого содержимого. В данном случае это кнопка покупки товара, при наведении отображается цена, а при нажатии вы можете реализовать добавление товара в корзину.

31. 07.2012

Кнопки с CSS3 псевдо-элементами

Сделаем необычные кнопки с использованием только одного тега ссылки, и конечно же благодаря CSS3.

Анимированные CSS3 кнопки

Симпатичные CSS3 кнопки, которые при наведении на них изменяют свою форму.

Кнопка Скачать на CSS3

Кнопка Загрузки с эффектами CSS3 при наведении. Выглядит очень эффектно и стильно, но ограничение это поддержка браузерами CSS3.

Круглая кнопка для соц. сетей

Круглая кнопка SHARE при наведении на которую появляются кнопки сервисов популярных социальных сетей, таких как, например, twitter, google +1, vkontakte, facebook и любых других по вашему усмотрению. Кнопки выбранных сервисов будут расположены по кругу.

Градиентные CSS3 кнопки

Очередной стильный вариант градиентных CSS3 кнопочек.

Кнопки с градиентом на CSS3

Очередная порция CSS3 кнопок с готовым набором градиентов разных цветов.

CSS3 кнопки в стиле Google Plus

Повторим реализацию кнопок, которые сейчас используются на сервисе Google Plus с помощью CSS3.

Логотип RSS с помощью CSS3

Сделаем логотип RSS ленты не с помощью photoshop, а с помощью CSS3.

CSS3 меню

Аккуратненькое и стильное меню на css3. Впрочем его элементы можно использовать и как кнопки для сайта.

Кнопки-переключатели при помощи CSS3

Новые свойства CSS (CSS3) дают невероятные возможности для творчества и полета фантазии. Мне особенно нравится проектирование и создание элементов пользовательского интерфейса, таких как кнопки, переключатели и тому подобное. В этой статье я покажу вам, как создать кнопку-переключатель при помощи только CSS, без единой строчки JavaScript.

Несколько замечаний, прежде чем начнем: 

• Я не буду добавлять префиксы браузеров в примеры CSS-кода, но вы можете найти их в исходных файлах.
• Мы не будем использовать множество переходов между различными состояниями кнопок, потому что мы будем использовать псевдо-элементы для уменьшения количества html-элементов до минимума, а только Firefox поддерживает переходы/анимацию для псевдо-элементов.
• Мы будем использовать «checkbox hack» (см. ниже).

Лично я использую бокс-модель где [width] = [element-width] + [padding] + [borders]. Я активировал её при помощи следующего кода:

*,
*:after,
*:before {
    box-sizing: border-box;
}

О «Checkbox Hack»

Сheckbox hack позволяет нам иметь обработчик переключателя на чистом CSS. Он основывается на чекбоксе (который либо отмечен, либо неотмечен), псевдо-селекторе :checked, и родственном селекторе (~ или +). Если вкратце, то его можно описать так: «если чекбокс отмечен, то следующий элемент X ведет себя определенным заранее образом».

Раньше для таких целей использовали чекбокс с ID и тегом label, c атрибутом «for«, ссылающимся на ID чекбокса. Этот метод позволял скрыть чекбокс и переключать его, нажав на label. Единственная проблема с этим подходом это то, что мобильный Safari не поддерживает его.

Поэтому мы будем использовать другой способ: делаем чекбокс невидимым, устанавливаем его выше других элементов (z-index:100), в нашем случае выше label, и затем когда вы кликаете на тег label, то на самом деле вы отмечаете чекбокс! Код выглядит следующим образом:

. switch input {
    /* Вначале делаем его равным размеру контейнера, в котором он находится */
    position: absolute;
    width: 100%;
    height: 100%;
    /* Затем, перемещаем его вверх, относительно других элементов */
    z-index: 100;
    /* Делаем его невидимым */
    opacity: 0;
    /* А это для эргономичности */
    cursor: pointer;
}

Эти 12 строк CSS-кода будут использоваться во всех последующих примерах, без изменений.

Пример 1

Давайте начнем с красивой небольшой кнопки, с небольшим горящим индикатором, когда она отмечена.

Разметка

<div>
    <input type=»checkbox»>
    <label></label>
</div>

Элемент .switch — это наш контейнер. Внутри этого элемента находится тег input и тег label. Для тега input достаточно указать только тип checkbox (ID, name не нужны).

Последний элемент может быть каким угодно (ссылкой, div-ом, span-ом, label и т. д.). Я использую label по старой привычке, потому что раньше использовал старый хак для чекбоксов, для которого необходим был тег label.

CSS

Во-первых, мы зададим нашей кнопке размер, установив ширину и высоту контейнера. Убедитесь, что ширина и высота равны, иначе ваша кнопка не будет круглой. Помните, что мы прячем чекбокс при помощи CSS-кода, приведенного в начале этой статьи.

.switch {
    width: 100px;
    height: 100px;
    position: relative;
}

Затем зададим стили для тега label. Прежде всего, установим его размеры равные размерам его родителя (контейнер). Затем, зададим ему относительное позиционирование для того, чтобы добавить позже некоторые псевдо-элементы.

.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 50%;
    background: #eaeaea;
    box-shadow:
        0 3px 5px rgba(0,0,0,0.25),
        inset 0 1px 0 rgba(255,255,255,0. 3),
        inset 0 -5px 5px rgba(100,100,100,0.1),
        inset 0 5px 5px rgba(255,255,255,0.3);
}

Затем, при помощи псевдо-элемента :after добавим кнопке реалистичности, нарисуем круглую рамку, добавим градиент и тени.

.switch label:after {
    content: «»;
    position: absolute;
    z-index: -1;
    top: -8%;
    right: -8%;
    bottom: -8%;
    left: -8%;
    border-radius: inherit;
    background: #ddd; /* Fallback */
    background: linear-gradient(#ccc, #fff);
    box-shadow:
        inset 0 2px 1px rgba(0,0,0,0.15),
        0 2px 5px rgba(200,200,200,0.1);
}

Теперь добавим индикатор состояния кнопки. Это будет маленький круг, размещенный в середине кнопки.

.switch label:before {
    content: «»;
    position: absolute;
    width: 20%;
    height: 20%;
    left: 40%;
    top: 40%;
    border-radius: inherit;
    background: #969696; /* Fallback */
    background: radial-gradient(40% 35%, #ccc, #969696 60%);
    box-shadow:
        inset 0 2px 4px 1px rgba(0,0,0,0. 3),
        0 1px 0 rgba(255,255,255,1),
        inset 0 1px 0 white;
}

Итак, теперь у нас есть симпатичная кнопка. Давайте разбираться с отмеченным состоянием кнопки. Когда вы нажимаете на контейнер, вы на самом деле нажимаете на невидимый чекбокс, который находится над тегом label. Если вы отметили чекбокс, это означает, что вы можете использовать селектор :checked и родственный селектор.

Таким образом, когда кнопка включена, мы изменим цвет фона индикатора (псевдо-элемент :before), а также фон кнопки.

.switch input:checked ~ label { /* Button */
    background: #e5e5e5; /* Fallback */
    background: linear-gradient(#dedede, #fdfdfd);
}
 
.switch input:checked ~ label:before { /* LED */
    background: #25d025; /* Fallback */
    background: radial-gradient(40% 35%, #5aef5a, #25d025 60%);
    box-shadow:
        inset 0 3px 5px 1px rgba(0,0,0,0.1),
        0 1px 0 rgba(255,255,255,0.4),
        0 0 10px 2px rgba(0, 210, 0, 0. 5);
}

Пример 2

В этом примере мы сделаем переключатель, похожий на те, которые используются в каждом доме для включения\выключения света.

Разметка

Разметка такая же, как и в первом примере: контейнер, чекбокс и этикетка:

<div>
    <input type=»checkbox»>
    <label></label>
</div>

CSS

Начнем с установки размера нашей кнопки.

.switch {
    width: 50px;
    height: 100px;
    position: relative;
}

В этом примере используем множество теней для блока, чтобы кнопка хорошо выглядела. Давайте добавим также мягкие цвета фона и закругленные углы, чтобы все это выглядело еще мягче:

.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #cbc7bc;
    border-radius: 5px;
    box-shadow:
        inset 0 1px 0 white,
        0 0 0 1px #999,
        0 0 5px 1px rgba(0,0,0,0. 2),
        0 2px 0 rgba(255,255,255,0.6),
        inset 0 10px 1px #e5e5e5,
        inset 0 11px 0 rgba(255,255,255,0.5),
        inset 0 -45px 3px #ddd;
}

Теперь давайте добавим псевдо-элементы. Первый из них предназначен для создания корпуса, второй для имитации переключения. Давайте начнем с корпуса:

.switch label:after {
    content: «»;
    position: absolute;
    z-index: -1;
    top: -20px;
    left: -25px;
    bottom: -20px;
    right: -25px;
    background: #ccc; /* Fallback */
    background: linear-gradient(#ddd, #bbb);
    border-radius: inherit;
    border: 1px solid #bbb;
    box-shadow:
        0 0 5px 1px rgba(0,0,0,0.15),
        0 3px 3px rgba(0,0,0,0.3),
        inset 0 1px 0 rgba(255,255,255,0.5);
}

Второй более интересен, так как у нас есть только один элемент для создания двух состояний. Используем для этого box-shadow!

.switch label:before {
    content: «»;
    position: absolute;
    width: 8px;
    height: 8px;
    top: -13px;
    left: 20px;
    background: #666;
    border-radius: 50%;
    box-shadow:
        0 1px 0 white, /* Subtle reflection on the bottom of the hole */
        0 120px 0 #666, /* Faking a second screw hole. .. */
        0 121px 0 white; /* And its reflection */
}

В этом примере только центральная часть (которая является тегом label) будет изменяться, когда мы щелкнем по кнопке. И мы создали этот эффект при помощи box-shadow:

.switch input:checked ~ label { /* Button */
    background: #d2cbc3;
    box-shadow:
        inset 0 1px 0 white,
        0 0 0 1px #999,
        0 0 5px 1px rgba(0,0,0,0.2),
        inset 0 -10px 0 #aaa,
        0 2px 0 rgba(255,255,255,0.1),
        inset 0 45px 3px #e0e0E0,
        0 8px 6px rgba(0,0,0,0.18);
}

Пример 3

Давайте попробуем создать пример еще круче. Он взят из прекрасного дизайна  от талантливого Piotr Kwiatkowski. Это выглядит очень симпатично, не так ли?

Разметка

Для этого переключателя, нам нужен будет дополнительный элемент. Используем для этой цели тег <i>.

<div>
    <input type=»checkbox»>
    <label><i></i></label>
</div>

CSS

Итак, еще раз, мы скрываем чекбокс и задаем размеры для контейнера.

.switch {
    width: 180px;
    height: 50px;
    position: relative;
}

Затем мы собираемся сделать следующее: label будет контейнером для переключателя. А тег <i> и будет фактически переключателем. Поэтому тег label будет иметь только серый фон с тенями, не более того. Псевдо-элементы сделают все остальное.

.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    background: #a5a39d;
    border-radius: 40px;
    box-shadow:
        inset 0 3px 8px 1px rgba(0,0,0,0.2),
        0 1px 0 rgba(255,255,255,0.5);
}

Это «рамка контейнера», поэтому мы задаем ей приятный градиент и некоторые тени для блока.

.switch label:after {
    content: «»;
    position: absolute;
    z-index: -1;
    top: -8px; right: -8px; bottom: -8px; left: -8px;
    border-radius: inherit;
    background: #ccc; /* Fallback */
    background: linear-gradient(#f2f2f2, #ababab);
    box-shadow: 0 0 10px rgba(0,0,0,0. 3),
        0 1px 1px rgba(0,0,0,0.25);
}

Этот псевдо-элемент предназначен для создания мягкого углубления вокруг кнопки, для этого мы будем использовать градиент и тени. Небольшое улучшение для Chrome с помощью фильтра blur, чтобы сделать эффект еще мягче.

.switch label:before {
    content: «»;
    position: absolute;
    z-index: -1;
    top: -18px; right: -18px; bottom: -18px; left: -18px;
    border-radius: inherit;
    background: #eee; /* Fallback */
    background: linear-gradient(#e5e7e6, #eee);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-filter: blur(1px); /* Smooth trick */
    filter: blur(1px); /* Future-proof */
}

Итак, теперь у нас есть очень красивая рамка для наших переключателей. Теперь перейдем к самим переключателям.

Сделаем его блочным элементом, зададим ему высоту его родителя и немного больше чем половину ширины родителя. Мы поместим его слева от контейнера, и зададим ему некоторые стили (тени и градиенты):

. switch label i {
    display: block;
    height: 100%;
    width: 60%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: inherit;
    background: #b2ac9e; /* Fallback */
    background: linear-gradient(#f7f2f6, #b2ac9e);
    box-shadow:
        inset 0 1px 0 white,
        0 0 8px rgba(0,0,0,0.3),
        0 5px 5px rgba(0,0,0,0.2);
}

Этот первый псевдо-элемент используется для улучшения эстетики: он добавляет симпатичный эффект переключения.

.switch label i:after {
    content: «»;
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3; /* Fallback */
    background: linear-gradient(#cbc7bc, #d2cbc3);
    border-radius: inherit;
}

Вторым псевдо-элементом является слово «ON» или «OFF», в зависимости от состояния кнопки. Мы используем свойство content, чтобы установить нужное слово, и некоторые стили для шрифтов, чтобы она выглядела, как будто она выгравирована на фоне:

. switch label i:before {
    content: «off»;
    position: absolute;
    top: 50%;
    right: -50%;
    margin-top: -12px;
    color: #666; /* Fallback */
    color: rgba(0,0,0,0.4);
    font-style: normal;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 24px;
    text-transform: uppercase;
    text-shadow: 0 1px 0 #bcb8ae, 0 -1px 0 #97958e;
}

Теперь у нас есть тумблер, который выглядит точно также как нарисовал Piotr, верно?

Теперь займемся состоянием кнопки, когда она «включена». Три вещи будут изменяться когда мы нажмем на флажок: цвет фона, переключение позиции, и слово («ON» или «OFF»):

.switch input:checked ~ label { /* Background */
    background: #9abb82;
}
 
.switch input:checked ~ label i { /* Toggle */
    left: auto;
    right: -1%;
}
 
.switch input:checked ~ label i:before { /* On/off */
    content: «on»;
    right: 115%;
    color: #82a06a;
    text-shadow: 0 1px 0 #afcb9b, 0 -1px 0 #6b8659;
}

Пример 4

Наш последний пример основан на другой работе от Piotr Kwiatkowski, но немного отредактированной мною, чтобы иметь те же цвета, что и другие примеры.

Разметка

Разметка будет почти такой же, как в третьем примере. Класс для тега <i> нужен для того, чтобы использовать FontAwesome.

<div>
    <input type=»checkbox»>
    <label><i></i></label>
</div>

CSS

Я не буду описывать здесь все возможности FontAwesome, потому что я уверен, что многие уже работали с ним. Просто убедитесь, что

• в вашем @font-face указан правильный путь к файлам,
• один из ваших CSS-файлов включает в себя стили FontAwesome.

Итак, давайте начнем с основ: спрячем чекбокс и установим размеры контейнера:

.switch {
    width: 150px;
    height: 150px;
    position: relative;
}

Теперь, давайте позаботимся о этикетке, которая и будет нашей большой кнопкой. Обратите внимание, что мы включаем сюда некоторые стили для шрифтов. Поскольку все они наследуются, они будут применены к тегу <i> (значок).

.switch label {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    color: #a5a39d;
    font-size: 70px;
    text-align: center;
    line-height: 115px;
    text-shadow: 0 2px 1px rgba(0,0,0,0.25);
    border-radius: 50%;
    background: #b25244; /* Fallback */
    background: linear-gradient(#f7f2f6, #b2ac9e);
    transition: all 0.3s ease-out;
    z-index: -1;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.13),
        0 5px 8px rgba(0,0,0,0.3),
        0 10px 10px 4px rgba(0,0,0,0.3);
}

Оба псевдо-элемента для этикетки используются для создания симпатичного эффекта вокруг кнопки. Мы применяем фильтр размытия для :before, чтобы сделать его немного более тонким.

.switch label:before {
    content: «»;
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    z-index: -1;
    border-radius: inherit;
    box-shadow: inset 0 10px 10px rgba(0,0,0,0. 13);
    -webkit-filter:blur(1px); /* Smooth trick */
    filter: blur(1px); /* Future-proof */
}
 
.switch label:after {
    content: «»;
    position: absolute;
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    z-index: -2;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 1px 2px rgba(0,0,0,0.3),
        0 0 10px rgba(0,0,0,0.15);
}

Теперь разберемся с нашими дополнительным элементом: <i>. FontAwesome использует :before псевдо-элемент, чтобы показать иконку, поэтому мы не можем его использовать. Но мы можем использовать :after, и мы так и поступим, потому что мы должны что-то сделать с верхней частью нашей кнопки.
Как обычно, мы зададим ей симпатичный градиент, тонкие тени с 1px размытия, чтобы сделать ее более гладкой.

.switch .icon-off:after {
    content: «»;
    display: block;
    position: absolute;
    width: 70%;
    height: 70%;
    left: 50%;
    top: 50%;
    z-index: -1;
    margin: -35% 0 0 -35%;
    border-radius: 50%;
    background: #d2cbc3; /* Fallback */
    background: linear-gradient(#cbc7bc, #d2cbc3);
    box-shadow:
        0 -2px 5px rgba(255,255,255,0. 05),
        0 2px 5px rgba(255,255,255,0.1);
    -webkit-filter:blur(1px); /* Smooth trick */
    filter: blur(1px); /* Future-proof */
}

Теперь стили для отмеченного состояния: значок становится зеленым, а кнопка выглядит нажатой:

.switch input:checked ~ label { /* Button */
    color: #9abb82;
    box-shadow:
        inset 0 2px 3px rgba(255,255,255,0.13),
        0 5px 8px rgba(0,0,0,0.35),
        0 3px 10px 4px rgba(0,0,0,0.2);
}

Спасибо за внимание, надеюсь вам понравилось

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

Скачать исходные файлы

Перевод статьи с http://tympanus.net

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

Кнопка Foundation

Кнопка Стиль

Фонд предлагает шесть стилей кнопок. .button класс создает синюю кнопку вместе с прокладкой. Различные цвета для класса кнопки: .secondary , . success , .info , .warning или .alert :

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> По умолчанию кнопка </>
<Тип Button = «кнопка» класс = «Кнопка вторичного»> Вторичный </ кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка успеха»> Успех </ кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка информация»> Информация </ Кнопка>
<Кнопка тип = «кнопка» класс = «предупреждение кнопка»> Предупреждение </ кнопка>
<Кнопка тип = «кнопка» класс = «кнопка оповещения»> оповещения </ кнопка>

Класс Button можно использовать в <a> , <button> , или <input> элемент:

примеров

<A HREF = «#» класс = «button info» роли = «button»> Кнопка Link </ а>
<Кнопка тип = «кнопка» класс = «Кнопка Информация»> Кнопка </ кнопка>
<Тип входного = класс «Кнопка» = «Кнопка Информация» значение = «Input Button»>
<Тип входного = «отправить» класс = «Кнопка Информация» Значение = «Отправить Кнопка»>

	Почему бы HREF тег #? Когда мы не хотим, чтобы прыгать и нажмите на ссылку, чтобы получить «404», мы можем установить тег HREF #.

Размер кнопки

Мы можем использовать .large , .small или .tiny класс , чтобы установить размер кнопки:

примеров

<Тип Button = «кнопка» класс = «кнопка большой»> Большой </ кнопка>
<Кнопка тип = класс «Кнопка» = «Кнопка»> По умолчанию кнопка </>
<Тип Button = «кнопка» класс = «кнопка маленький»> Малый Кнопка </>
<Тип Button = «кнопка» класс = «кнопка крошечные»> Крошка </ кнопка>

кнопка Округлые

Вы можете использовать .radius и .round класс , чтобы установить круглую кнопку:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «радиус Кнопка»> Радиус Кнопка </ кнопка>
<Кнопка тип = «кнопка» класс = «круглая кнопка»> Круглые кнопки </ Кнопка>

Кнопка расширения

Вы можете использовать . expand класс для установки кнопки на 100% широкополосного доступа:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «Кнопка расширения»> Expanded Кнопка </ кнопка>

кнопка Отключить

Вы можете использовать .disabled класс нажмите на кнопку Настройка не доступна:

примеров

<Кнопка тип = класс «Кнопка» = «Кнопка»> Кнопка по умолчанию </ Кнопка>
<Кнопка тип = «кнопка» класс = «кнопка отключена»> Кнопка Отключено </ Кнопка>

Как создать кнопку с закругленными углами с помощью CSS

В CSS3 вы можете придать элементам закругленные углы с помощью свойства border-radius. Давайте посмотрим на это на примере.

Предположим, у вас есть следующая разметка.

Чтобы сделать div видимым, мы установим его ширину и высоту и зададим ему красный цвет фона.

  .red_div {
  цвет фона: красный;
  ширина: 200 пикселей;
  высота: 100 пикселей;
}
  

Ниже приводится результат вышеуказанного.

Чтобы сделать границы div скругленными, вы можете добавить следующий стиль:

Вышеуказанное устанавливает радиус 15 пикселей в верхнем левом, верхнем правом, нижнем левом и нижнем правом углах элемента. Чем выше значение радиуса, тем более скругленным становится край.

Ниже вы можете увидеть результат указанной выше разметки.

Свойство border-radius можно записать несколькими способами.

Указание одного значения для свойства установит для всех четырех краев элемента радиус этого значения.

  радиус границы: 15 пикселей 15 пикселей;
  

С двумя значениями первое будет применяться к верхнему левому и нижнему правому углу, а второе — к верхнему правому и нижнему левому углам

  радиус границы: 15px 15px 15px;
  

При трех значениях первое будет использоваться для верхнего левого угла, второе значение для верхнего правого и нижнего левого углов, а третье значение будет применено к нижнему правому углу.

  радиус границы: 15px 15px 15px 15px;
  

Вышеуказанное явно устанавливает значение для каждого края.Вышеупомянутое является сокращением для приведенного ниже CSS, который также явно дает значение для каждого края.

  граница-верх-левый-радиус: 15 пикселей;
граница-верх-правый-радиус: 15 пикселей;
граница-нижний-правый-радиус: 15 пикселей;
граница-нижний-левый-радиус: 15 пикселей;
  

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

Добавление закругленных углов к кнопкам

border-radius можно использовать и для других элементов.Ниже мы видим, что он используется для добавления закругленных углов к кнопке.

  кнопка {
  ширина: 200 пикселей;
  высота: 100 пикселей;
  радиус границы: 20 пикселей;
}
  

Кнопка будет выглядеть так:

Вот еще несколько примеров готовых кнопок

Границ · Bootstrap

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

Граница

Используйте утилиты для создания границ, чтобы добавить или удалить границы элемента.Выбирайте из всех границ или по одной.

Присадка

Субтрактивное

Цвет рамки

Измените цвет границы с помощью утилит, созданных на основе цветов нашей темы.

Радиус границы

Добавьте классы к элементу, чтобы легко скруглить его углы.

Пример закругленного изображения 75×75 Пример скругленного сверху изображения 75×75 Пример скругленного справа изображения 75×75 Пример скругленного снизу 75×75 Пример скругленного слева изображения 75×75 Полностью круглого изображения 75×75 Округленное изображение таблетки 150×75 Пример изображения без закруглений (отменяет округление, примененное в другом месте) 75×75

Размеры

Используйте . Round-lg или . Round-sm для большего или меньшего радиуса границы.

Пример маленького закругленного изображения 75×75 Пример большого закругленного изображения 75×75

Полное руководство по пуленепробиваемым кнопкам в дизайне электронной почты

Как дизайнеры и маркетологи, все мы понимаем важность вовлечения людей в наши кампании. Вот почему призыв к действию или CTA имеет решающее значение.

Мы уже писали о призывах к действию и их важности в почтовом маркетинге, а в этом сообщении в блоге мы немного углубимся в один из методов создания призыва к действию — пуленепробиваемую кнопку.

Не использовать изображения

Из-за блокировки изображений призывы к действию на основе изображений не рекомендуются и не используются большинством маркетологов электронной почты.

Если ваши призывы к действию содержатся в изображениях, велика вероятность, что многие подписчики упускают из виду ваше сообщение. Хуже того, они не взаимодействуют с вашими кампаниями.

Использование кнопок CTA на основе изображений также влияет на доступность вашей электронной почты. Если вы скрываете контекст CTA внутри изображения, программы чтения с экрана могут быть не в состоянии их прочитать, что сделает вашу электронную почту недоступной для подписчиков с ослабленным зрением.

К счастью, есть способ лучше использовать CTA: пуленепробиваемые кнопки.

Пуленепробиваемая кнопка приближается

Пуленепробиваемые кнопки позволяют создавать кнопки с кодом вместо изображений.Вы можете надежно поменять свои GIF, PNG и JPEG на HTML и CSS.

При использовании только HTML и CSS кнопка будет отображаться во всех почтовых клиентах даже без изображений, что делает их «пуленепробиваемыми».

Более того, вы можете обновить содержимое и стиль кнопок, просто отредактировав HTML-шаблон. Вам больше не нужно тратить время на создание кнопок в Photoshop, загрузку их на сервер и обновление HTML.

Есть несколько способов кодирования пуленепробиваемых кнопок.Давайте рассмотрим четыре разных подхода.

1. Кнопки на основе VML

Традиционный подход к пуленепробиваемым кнопкам популяризировал Стиг, разработчик Campaign Monitor. Этот подход использует стили для самой ссылки, чтобы структурировать и стилизовать кнопку для большинства почтовых клиентов. Структура предоставляется через свойства line-height и width. В качестве запасного варианта для Microsoft Outlook в условных комментариях для Outlook используется язык векторной разметки (VML).

  

  






 Я кнопка & rarr; 


 Я кнопка & rarr; 



  

Этот метод пуленепробиваемой кнопки по существу создает две версии кнопки. Первый использует условный комментарий для настольных клиентов Outlook и использует разметку VML для стилизации кнопки.

  
  

 Я кнопка & rarr; 
  
  

Все остальные клиенты затем используют стандартную ссылку сразу после оператора .

   Я кнопка & rarr;   

Кнопки на основе VML Плюсы и минусы

Плюсов:

• Отличная поддержка в большинстве почтовых клиентов (см. Таблицу ниже).
• Нажимаем на всю кнопку.

Минусы:

• • Использует незнакомый язык — VML — проприетарный язык для набора приложений Microsoft Office, что делает создание новых пуленепробиваемых кнопок и обновление существующих трудоемким и трудоемким.
  • Необходимо указать ширину и высоту пуленепробиваемой кнопки, поэтому любое изменение копии CTA потребует изменения размеров кнопки.

Если вы не хотите разбираться в тонкостях VML (и, честно говоря, кому это нужно?), У Campaign Monitor есть бесплатный онлайн-инструмент для создания традиционных пуленепробиваемых кнопок. Buttons.cm позволяет легко создавать новые CTA, которые будут отлично смотреться и хорошо работать в большинстве почтовых клиентов.

2. Кнопки с заполнением

В этом методе для кнопки используется простая таблица HTML.Он полагается на заполнение на уровне ячейки таблицы для структурирования кнопки, а также на атрибуты HTML и CSS для стилизации кнопки.

  

  

    

      


  Я кнопка & rarr;  

      
    
  
  

Плюсы и минусы кнопок на основе Padding

Плюсов:

• • • Хорошо работает с большинством почтовых клиентов (см. Таблицу ниже).
    • Использует код, с которым знакомы дизайнеры электронной почты — HTML и CSS, что упрощает создание новых пуленепробиваемых кнопок и обновление существующих.

Минусы:

• • • Не нажимается вся кнопка, что может привести к трениям с подписчиками, которые думают, что они нажали или нажали кнопку.

3. Кнопки с границами

Кнопки с границами используют тот же подход, что и предыдущий метод.Используя простой HTML и CSS, мы можем структурировать и стилизовать наши призывы к действию. Однако вместо того, чтобы полагаться на заполнение на уровне ячейки таблицы для структуры, мы добавляем толстые границы к самой ссылке, чтобы построить наш CTA.

  

  





 Я кнопка & rarr; 





  

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

Кнопка с границами Плюсы и минусы

Плюсов:

• • • Все стили выполнены на самом теге ссылки, что упрощает код.
    • Используется только одна кнопка. Никаких двойных кнопок или запутанного кода VML не требуется.
    • Вам не нужны конкретные определения высоты или ширины, что делает кнопки легко масштабируемыми.

Минусы:

• • • Outlook немного уменьшает размер границ.
    • Outlook не распознает теги как элементы уровня блока.
    • Нет возможности добавлять более сложные стили, например дополнительные границы, к конкретному элементу ссылки.

Это приводит нас к окончательному способу создания пуленепробиваемых кнопок…

4. Заполнение + кнопки с границами

Кнопки заполнения и рамки объединяют элементы двух предыдущих подходов.

По сути, этот подход использует ту же структуру стилизации ссылки как с отступом, так и со сплошной рамкой размером не менее 1 пикселя. Затем к применяется цвет фона, чтобы заполнить весь фон ссылки. В этом случае цвет фона должен быть применен к вместо , поскольку Outlook не распознает горизонтальное заполнение тега (поскольку он не поддерживает такой стиль для HTML-элементов неблочного уровня) .

  

  




  Я кнопка & rarr;  




  

Padding + Border Button Плюсы и минусы

Плюсов:

• • • Необходимо закодировать только одну кнопку, что упрощает обновление кнопок, использующих этот метод.
    • Определенных размеров для кнопок не требуется.
    • Фоновые изображения могут поддерживаться этим методом.

Минусы:

• • • Стиль разделен между и , поэтому оба должны быть обновлены при изменении стиля кнопки.

Хаки и улучшения

Каждый из вышеперечисленных методов является отличной отправной точкой для создания пуленепробиваемых кнопок, но каждый метод может быть дополнительно модифицирован для создания более пуленепробиваемых кнопок.

Horizontal Padding Hack для Outlook

Outlook не поддерживает горизонтальное заполнение, из-за чего текст CTA может располагаться очень близко к левому и правому краям пуленепробиваемой кнопки.Быстрый прием, который можно использовать для увеличения горизонтального «заполнения» для Outlook, — это условное добавление встроенных неразрывных пробелов с каждой стороны ссылки.

    & nbsp;    

Прогрессивное улучшение с помощью медиа-запросов

Чтобы улучшить дизайн пуленепробиваемой кнопки, вы можете использовать расширенные стили, такие как границы, градиенты, веб-шрифты, эффекты наведения и многое другое.

Поддержка

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

Вы можете ознакомиться с полными тестами Litmus здесь.

* Закругленные углы не отображаются. † Кнопки свернуты.
** Текст из VML CTA отображается над кнопкой, отличной от VML.

Ваши кампании пуленепробиваемы?

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

Какая ваша любимая техника пуленепробиваемой пуговицы?

Расскажите, как создавать пуленепробиваемые кнопки в электронных письмах, в сообществе Litmus.

Присоединяйтесь к разговору →

Забудьте о пуленепробиваемых кнопках электронной почты HTML / CSS — сделайте их надежными!

Кнопка бомбы, которая работает на всем, даже на нотах лотоса…

Я кодирую в ActionRocket почти 6 месяцев и понял, что один размер не подходит всем. У нас есть солидный код для кодирования кнопок с призывом к действию, но вся кнопка не нажималась. Мы все прошли путь всех кнопок с изображениями — хотя это все еще жизнеспособный вариант для сложных кнопок или если бренд настолько силен, что не может справиться с Outlook, меняющим шрифт и теряющим закругленные углы…

Итак, у меня была задача создать кнопку, которую можно было бы использовать повсюду, которая также могла бы легко вписаться в редакторы WYSIWYG и ESP, такие как под эгидой Salesforce, а также небольшие бизнес-приложения, такие как Mailchimp и Campaign Monitor.

Хотите сразу перейти к окончательному коду — найдите его здесь.

CSS

Все стили являются встроенными, но они помещают приведенный ниже набор классов в медиа-запрос, для которого задана максимальная ширина, чтобы эти кнопки работали на мобильных устройствах.

Первый класс — .wrapto100pc — гарантирует, что на мобильных устройствах элемент расширяется до 100% ширины. В данном случае ширина тд / таб.

За ним следует класс для скрытия содержимого на мобильных устройствах — .nomob — чтобы в этом случае элементы не отображались на экране ниже 600 пикселей.

Наконец, чтобы гарантировать, что в приложении Gmail на iOS ширина кнопки составляет 100%.

HTML

Сначала стол:

Цвет фона bgcolor (можно оставить пустым для прозрачной кнопки). border-radius для изогнутых краев на настольных / мобильных устройствах. К сожалению, border-radius не поддерживается в Outlook или Lotus Notes, поэтому кнопка будет квадратной, но для получения закругленных углов в Outlook вы можете добавить VML (скоро появится сообщение в блоге).

Затем строка таблицы с 3 ячейками — обе внешние ячейки одинаковы. Они исчезают на мобильном class = «nomob», но необходимы на рабочем столе, чтобы сохранить отступы и место для закругленных кнопок.

Кнопка в разобранном состоянии

Установка радиуса верхнего и нижнего углов соответственно сохраняет закругленные края. Ширина составляет всего 8 пикселей, чтобы сохранить интервал, но на самом деле на эту область нельзя нажимать — но это не очевидно на рабочем столе. Эти ячейки edge имеют тот же цвет bgcolor, что и вся таблица.

Затем мы добавляем центральный: align = ”center”, чтобы кнопка оставалась посередине, bgcolor для соответствия таблице, два класса для мобильных wrapto100pc и gmailbutton.Следующий раздел посвящен стилю текста — так что сопоставьте его с руководящими принципами любого бренда, которые вы используете:

style = »размер шрифта: 16 пикселей; высота строки: 20 пикселей; семейство шрифтов: helvetica, arial, sans-serif, «Montserrat»; цвет: #ffffff; текстовое оформление: нет;

Следуют:

vertical-align: middle; — Сохраняет слова по центру вертикально.

высота: 44 пикс; — Высота кнопки, которую можно изменить по своему усмотрению.

радиус границы: 8 пикселей; — Одинаковый радиус границы по всей

  & nbsp; & nbsp; & nbsp; 
 

 


 
 
 

 & nbsp; & nbsp; & nbsp;   ПРИЗЫВ К ДЕЙСТВИЮ   & nbsp; & nbsp; & nbsp; 

 
 
 
 

  

 
  <стиль>
    .кнопка {
    цвет фона: # 4CCF50;
    цвет белый;
    отступ: 15px 32px;
    выравнивание текста: центр;
    текстовое оформление: нет;
    дисплей: встроенный блок;
    размер шрифта: 16 пикселей;
    маржа: 4px 2px;
    курсор: указатель;
}