Lecaw

Учимся создавать Web-сайты

Создание кнопки включения – выключения / Как сделать кнопку CSS

July 18, 2012
CSS
730hits

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

 ДЕМОИсходные файлы

 

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

Так, на сей раз мы расскажем как создать CSS кнопку, которая будет на этом превосходном проекте в Dribbble, используя только CSS.

HTML

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

<section>  
<a rel="external" href="#" id="button"></a>
<span></span>
</section>

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

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

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

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

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, а не изображение. Благодаря этому, значок будет легко настраиваемым и масштабируемым через таблицу стилей.

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

@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; если внимательно посмотрите на разметку HTML, то увидите что мы поместили этот цифровой символ  в тег якоря, но так как мы не определили пользовательское семейство шрифтов в стиле кнопки, значок все равно должен отображаться правильно.

Как сделать 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, но это действительно просто. Ниже весь код 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);  
}  

 ДЕМОИсходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(3 голосов)

Оставить комментарий