Создаем красивые CSS кнопки

Новые свойства CSS3 - невероятная площадка для творчества. Особенно я люблю разрабатывать и создавать элементы UI, например css кнопки и переключатели. В этом учебном руководстве я покажу, как создать кнопочные переключатели на CSS, без использования JavaScript.

Сложность

Общая информация:

  • Я не стал перечислять все префиксы в CSS коде, вы сможете найти их в исходных файлах.
  • Мы не будем использовать много переходов между состояниями кнопок, так как мы будем работать с псевдо-элементами, чтобы уменьшить количество строк до минимума.
  • Мы будем использовать метод “checkbox hack” (см. ниже).
  • Лично я использую box-model где [width] = [element-width] + [padding] + [borders]:
*,
    *:after,
    *:before {
        box-sizing: border-box;
    }

Что такое Checkbox Hack

Checkbox Hack позволяет нам создать обработчик переключателя на чистом CSS. Обработчик ссылается на css checkbox (в любом состоянии). Если checkbox отмечен, то следующий элемент X будет иметь такие то свойства.
В старом методе мы использовали checkbox с ID и атрибутом "for", вызывая css checkbox ID. Этот метод позволяет скрыть checkbox, но все еще работать с ним. Единственная проблема, мобильная версия Safari не будет поддерживать данный метод.

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

.switch input {
    /* делаем его такой же ширины как и контейнер */
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* делаем его невидимым */
    opacity: 0;
    cursor: pointer;
}

Эти 12 строк CSS кода будут использоваться во всех следующих демонстрационных примерах, поэтому можете просто копировать этот код, он никогда не изменится.
Примечание: ещё один интересный пример с использованием Checkbox Hack: Эффект наложения с появлением объектов на CSS3.

Пример 1

Давайте начнем с красивой небольшой css кнопки.

Разметка

<div class="switch">
    <input type="checkbox">
    <label></label>
</div>

Добавили основной контейнер с классом .switch. Элемент checkbox и метка (label), будут находиться друг на друге, для того, чтобы мы могли воспользоваться нашим приемом.

В место метки мы могли бы использовать - a, div, span, label, i/b тегом). Лично я выбрал метку, потому что хочу использовать метод Checkbox Hack, который требует наличие метки (label).

CSS

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

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

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

.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);
}

Это уже неплохо выглядит, но мы должны добавить псевдо-элементы, чтобы сделать кнопку еще более эффектной. Для улучшения рельефа, добавим отступы вокруг css кнопки. Устанавливаем для псевдо-элемента абсолютную позицию что бы расположить его под кнопкой, не указываем размеры, вместо этого добавим свойства top/right/bottom/left.

И конечно немного эстетики: мягкий градиент сверху вниз, а также box-shadows.

.switch label:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -8%; 
    right: -8%; 
    bottom: -8%; 
    left: -8%;
    border-radius: inherit;
    background: #ddd; /* нейтрализация */
    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);
}

А теперь LED индикатор, который отображает состояние css кнопки. Индикатор - маленький круг в середине кнопки. Помимо box-shadows мы будем использовать: радиальный градиент, хотя бы для тех браузеров, которые поддерживают радиальные градиенты. Для браузеров не поддерживающих радиальный градиент, мы применим нейтрализацию.

.switch label:before {
    content: "";
    position: absolute;
    width: 20%;
    height: 20%; 
    left: 40%;
    top: 40%;
    border-radius: inherit;
    background: #969696; /* нейтрализация */
    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;
}

Хорошо, у нас есть красивая кнопка css. Теперь настроим её параметры. При нажатии по контейнеру, фактически щелкаете по невидимому checkbox, который находится поверх метки. После активирования checkbox, меняем состояние и одноуровневый селектор.
Таким образом, при включении кнопки, меняем цвет фона LED индикатора (псевдо-элемент :before), а также фон кнопки.

.switch input:checked ~ label { /* кнопка */
    background: #e5e5e5; /* нейтрализация */
    background: linear-gradient(#dedede, #fdfdfd);
}
 
.switch input:checked ~ label:before { /* LED */
    background: #25d025; /* нейтрализация */
    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 class="switch">
    <input type="checkbox">
    <label></label>
</div>

CSS

Для начала, зададим размер css кнопки и скроем checkbox.

.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; /* нейтрализация */
    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);
}

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

.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, 
        0 120px 0 #666, 
        0 121px 0 white; 
}

Теперь несколько состояний переключателя. В этом примере будет меняться только центральная часть (которая является меткой) кнопки, при нажатии по переключателю.

.switch input:checked ~ label { /* кнопка */
    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

Разметка

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

<div class="switch">
    <input type="checkbox">
    <label><i></i></label>
</div> 

CSS

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

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

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

.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);
}

Это - "фрейм контейнера", мы зададим ему градиент и немного css теней.

.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);
}

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

.switch label:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -18px; right: -18px; bottom: -18px; left: -18px;
    border-radius: inherit;
    background: #eee; /* нейтрализация */
    background: linear-gradient(#e5e7e6, #eee);
    box-shadow: 0 1px 0 rgba(255,255,255,0.5);
    -webkit-filter: blur(1px); 
    filter: blur(1px); 
}

Теперь у нас есть действительно красивый фрейм для нашего переключателя. Давайте настроим сам переключатель.

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

.switch label i {
    display: block;
    height: 100%;
    width: 60%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    border-radius: inherit;
    background: #b2ac9e; /* нейтрализация */
    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);
}

Первый псевдо-элемент нужен для эстетики переключателя. Разместим его по центру и зададим css градиент сверху вниз, почти такой же как и у родительского элемента.

.switch label i:after {
    content: "";
    position: absolute;
    left: 15%;
    top: 25%;
    width: 70%;
    height: 50%;
    background: #d2cbc3; /* нейтрализация */
    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: #9abb82;
}
 
.switch input:checked ~ label i { /* переключатель */
    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. Немного его отредактируем, что бы переключатель был одной цветовой гаммы, как остальные наши примеры.

Разметка

Разметку используем как в третьем примере.

<div class="switch">
    <input type="checkbox">
    <label><i class="icon-off"></i></label>
</div>

CSS

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

  • Указывайте правильные пути к файлам @font-face
  • Один из CSS файлов, должен иметь стили FontAwesome

Поэтому давайте начнем с основ: скроем checkbox и зададим размеры контейнера:

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

Теперь разберемся с меткой, которая является большой css кнопкой. Обратите внимание, что мы подключили дополнительные типы шрифтов. Иконку от шрифта добавим к элементу 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; /* нейтрализация */
    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);
}

Теперь, используем оба псевдо-элемента, чтобы сделать красивый эффект вокруг css кнопки. Добавим фильтр размытости:

.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); /* Фильтр размытости */
    filter: blur(1px); 
}
 
.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 (иконке). Используем псевдо-элемент :after для верхней части кнопку, а :before для FontAwesome. Как обычно, добавляем градиент, небольшие тонкие тени и размытость в 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; /* нейтрализация */
    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); 
    filter: blur(1px); 
}

Определим состояния css кнопки. При нажатии, индикатор меняется на зеленый цвет:

.switch input:checked ~ label { /* кнопка */
    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);
}

Заключение

Самое главное при создании кнопок на CSS это - тени! Также нам помогают тонкие градиенты и закругленные углы. Чтобы превратить простую кнопку в красивый переключатель, нужно использовать только один элемент: checkbox.
Имейте в виду, что не все браузеры смогут правильно отображать нашу демонстрационную страницу. Но это можно легко исправить при помощи фильтрации селекторов, например:

.switch:not(:checked) label {
}
 
 .switch:not(:checked) input {
 }

В этом случае фильтром является - :not(:checked), чтобы браузеры которые не поддерживают :checked, не использовали эти правила.

ДЕМО СКАЧАТЬ Перевод статьи Button Switches with Checkboxes and CSS3 Fanciness

 

Тэги: button

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.