Создание кнопки включения – выключения / CSS кнопки

До сих пор один из самых предпочтительных способов взаимодействовать с различными устройствами - при помощи кнопки; радио, ТВ, аудиоплеер, и даже смартфон, у которого есть голосовые функции (Siri, Cortana), они по прежнему нуждаются в одной или двух физических кнопок.

Сложность

В наш цифровой век, кнопка также развилась и в цифровой форме, которая делает её более интерактивной, динамичной и простой в создании, по сравнению с физической кнопкой.

Так, на сей раз мы расскажем как создать CSS кнопки.

HTML

Для начала создадим разметку для нашей CSS кнопки в HTML документе. Это действительно просто, кнопку размещаем при помощи ссылки, также рядом с ней будет элемент span в качестве индикатора.

<section>  
<a rel="external" href="#button" id="button">&#xF011;</a>
<span></span>
</section>

Вот что у нас получилось

Основной стиль

В этой части мы реализуем стиль для CSS кнопки.

Во-первых добавим этот темный фон и расположим кнопку по центру страницы. Затем скроем :focus и :active.

body {  
    background: url('images/micro_carbon.png');  
}  
section {  
    margin: 150px auto 0;  
    width: 75px;  
    height: 95px;  
    position: relative;  
    text-align: center;  
}  
:active, :focus {  
    outline: 0;  
}  

Пользовательские шрифты

Для иконки css кнопки мы будем использовать пользовательский шрифт Font Awesome, а не изображение. Благодаря этому, значок будет легко редактировать CSS стилями.

Загрузите шрифт, сохраните файлы шрифта (eot, woff, ttf и svg) в папку fonts, и скопируйте следующий код для добавления шрифтов в наш проект:

@font-face {  
  font-family: "FontAwesome";  
  src: url("fonts/fontawesome-webfont.eot");  
  src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'),  
       url("fonts/fontawesome-webfont.woff") format('woff'),  
       url("fonts/fontawesome-webfont.ttf") format('truetype'),  
       url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');  
  font-weight: normal;  
  font-style: normal;  
}

Иконка питания, которую мы добавили для этой кнопки, представлена в кодировке Unicode под номером F011; Обратите внимание на разметку, мы поместили этот цифровой символ &#xF011; в ссылку, но так как мы не определили семейство шрифтов в стиле кнопки, иконка все равно должна отображаться правильно.

Как сделать CSS кнопку

Прежде всего, мы должны установить шрифты для кнопки.

Наша CSS кнопка будет круглой, для этого используем свойство border-radius.

Так как мы используем шрифт для иконки, мы можем легко поменять её цвет и добавить тень.

Затем, создадим для кнопки эффект объемности. Это довольно хитрый эффект. Во-первых, установим background-color: rgb(83,87,93); для цветной основы css кнопки тогда у нас появится четыре уровня теней.

a {  
    font-family: "FontAwesome";  
    color: rgb(37,37,37);  
    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);  
    font-size: 32pt;  
    display: block;  
    position: relative;  
    text-decoration: none;  
    background-color: rgb(83,87,93);  
    box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */  
                0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */  
                inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */  
    width: 70px;  
    height: 70px;  
    border: 0;  
    border-radius: 35px;  
    text-align: center;  
    line-height: 79px;  
}  

Также создадим круг большего радиуса за пределами css кнопки, для него будем использовать псевдо-элемент :before вместо добавления дополнительной разметки.

a:before {  
    content: "";  
    width: 80px;  
    height: 80px;  
    display: block;  
    z-index: -2;  
    position: absolute;  
    background-color: rgb(26,27,29);  
    left: -5px;  
    top: -2px;  
    border-radius: 40px;  
    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  
                inset 0px 1px 2px rgba(0, 0, 0, 0.5);  
}

Как сделать индикатор CSS кнопки

Под кнопкой есть небольшой индикатор состояния Power On / Off. Ниже, мы добавим свет красного цвета, потому что питание первоначально ВЫКЛЮЧЕНО, также добавим box-shadow чтобы усилить эффект света.

a + span {  
    display: block;  
    width: 8px;  
    height: 8px;  
    background-color: rgb(226,0,0);  
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(226,0,0,0.5);  
    border-radius: 4px;  
    clear: both;  
    position: absolute;  
    bottombottom: 0;  
    left: 42%;  
}  

С этого момента CSS кнопка уже начинает выглядеть приемлемо, теперь добавим дополнительные эффекты при наведении и щелчке, должно быть видно что она нажата и удерживается в таком положении.

Для достижения такого эффекта, первый box-shadow в кнопке будет обнулен, сместим его немного ниже. Также немного скорректируем интенсивность остальных трех теней, чтобы они соответствовали расположению кнопки.

a:active {  
    box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */  
                0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */  
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */  
    background-color: rgb(83,87,93);  
    top: 3px;  
}  

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

Используем псевдо-класс :target, поменяем цвет иконки на белый и добавим тень.

a:target {  
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),  
                0px 3px 7px 0px rgb(17,17,17),  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),  
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);  
    background-color: rgb(83,87,93);  
    top: 3px;  
    color: #fff;  
    text-shadow: 0px 0px 3px rgb(250,250,250);  
}  

a:active:before, a:target:before {  
    top: -5px;  
    background-color: rgb(26,27,29);  
    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  
                inset 0px 1px 2px rgba(0, 0, 0, 0.5);  
}

Индикатор поменяется с красного (по умолчанию), на зеленый, чтобы подчеркнуть, что питание включено.

a:target + span {  
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(135,187,83,0.5);  
    background-color: rgb(135,187,83);  
}  

Как сделать эффект перехода CSS кнопки

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

Код ниже добавит переход к цветам и тени текста на 350ms.

a {  
transition: color 350ms, text-shadow 350ms;  
    -o-transition: color 350ms, text-shadow 350ms;  
    -moz-transition: color 350ms, text-shadow 350ms;  
    -webkit-transition: color 350ms, text-shadow 350ms;  
}  

Вторая часть кода, добавит переход свойств background-color и box-shadow для индикатора.

a:target + span {  
transition: background-color 350ms, box-shadow 700ms;  
    -o-transition: background-color 350ms, box-shadow 700ms;  
    -moz-transition: background-color 350ms, box-shadow 700ms;  
    -webkit-transition: background-color 350ms, box-shadow 700ms;  
}  

Выключение кнопки

Если вы уже пробовали нажимать на CSS кнопку в демонстрационном примере, вы должны были заметить, что кнопка может быть нажата только один раз, для выключения придется использовать jQuery

$(document).ready(function(){  
    $('#button').click(function(){  
        $(this).toggleClass('on');  
    });  
});  

Теперь немного поменяем стиль. Просто замените псевдо-элемент :target с селектором класса .on, следующим образом:

a.on {  
    box-shadow: 0px 0px 0px 0px rgb(34,34,34),  
                0px 3px 7px 0px rgb(17,17,17),  
                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),  
                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);  
    background-color: rgb(83,87,93);  
    top: 3px;  
    color: #fff;  
    text-shadow: 0px 0px 3px rgb(250,250,250);  
}  
a:active:before, a.on:before {  
    top: -5px;  
    background-color: rgb(26,27,29);  
    box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1),  
                inset 0px 1px 2px rgba(0, 0, 0, 0.5);  
}  
a.on + span {  
    box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),  
                0px 0px 3px 2px rgba(135,187,83,0.5);  
    background-color: rgb(135,187,83);  
}  

Перевод статьи CSS3 Tutorial: Create A Sleek On/Off Button

Тэги: animatebuttonfont

Вход

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