Создание гладкой кнопки включения / выключения с помощью CSS3

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

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

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

Ну что ж, приступим.
HTML
Мы начнем с кнопки, разместив следующую разметку в нашем HTML-документе. Это действительно просто, кнопка будет основана на теге привязки, у нас также есть диапазон рядом с ним для создания светового индикатора, а затем они объединяются в тег раздела HTML5.

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

Мы сначала применяем этот темный фон из Subtle Pattern на основном документе и отцентрируйте раздел. Затем мы также удалим пунктирный контур на ссылках: focus и: active.

тело {фон: url (‘images / micro_carbon.png’); } section {margin: 150px auto 0; ширина: 75 пикселей; высота: 95 пикселей; положение: относительное; выравнивание текста: центр; }: активный,: фокус {контур: 0; } Использование собственного шрифта
Для значка кнопки мы будем использовать собственный шрифт из Font Awesome а не изображение. Таким образом, значок будет легко стилизован и масштабирован с помощью таблицы стилей.

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

@ font-face {семейство шрифтов: “FontAwesome”; src: url (“шрифты / fontawesome-webfont.eot”); src: url (“fonts / fontawesome-webfont.eot? #iefix”) формат (‘eot’), url (“fonts / fontawesome-webfont.woff”) формат (‘woff’), url (“fonts / fontawesome- webfont.ttf “) формат (‘truetype’), url (” fonts / fontawesome-webfont.svg # FontAwesome “) формат (‘svg’); шрифт: нормальный; стиль шрифта: нормальный; }

Значок питания, который нам нужен для этой кнопки, представлен в Unicode номер F011; Если вы внимательно посмотрите на разметку HTML выше, мы поместили этот числовой символ & # xF011; внутри тега привязки, но поскольку мы не определили настраиваемое семейство шрифтов в стиле кнопки, значок еще не отрисован правильно.

Дальнейшее чтение: Юникод и HTML: символы документа

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

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

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

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

{семейство шрифтов: “FontAwesome”; цвет: rgb (37,37,37); тень текста: 0px 1px 1px rgba (250,250,250,0.1); размер шрифта: 32pt; дисплей: блок; положение: относительное; текстовое оформление: нет; цвет фона: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1-я тень * / 0px 7px 10px 0px rgb (17,17,17), / * 1-я тень * / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3-я тень * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4-я тень * / width: 70px; высота: 70 пикселей; граница: 0; радиус границы: 35 пикселей; выравнивание текста: центр; высота строки: 79 пикселей; }

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

а: перед {содержанием: “”; ширина: 80 пикселей; высота: 80 пикселей; дисплей: блок; z-индекс: -2; позиция: абсолютная; цвет фона: rgb (26,27,29); слева: -5 пикселей; верх: -2px; радиус границы: 40 пикселей; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), вставка 0px 1px 2px rgba (0, 0, 0, 0,5); }

Дополнительная литература: CSS: до и: после псевдоэлементы (Hongkiat.com)
Индикатор
Под кнопкой есть крошечный свет, обозначающий состояние включения и выключения. Ниже мы применяем красный для цвета света, потому что питание изначально выключено, мы также добавляем тень блока, чтобы имитировать эффект мерцания света.

a + span {дисплей: блок; ширина: 8 пикселей; высота: 8 пикселей; цвет фона: rgb (226,0,0); box-shadow: вставка 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); радиус границы: 4 пикселя; ясно: оба; позиция: абсолютная; внизу: 0; осталось: 42%; } Эффект
На этом этапе наша кнопка начинает выглядеть хорошо, и нам нужно только добавить к ней некоторые эффекты, например, когда кнопка «нажимается», мы хотим, чтобы кнопка выглядела так, как будто она нажата и удерживается.

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

a: active {box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1-я тень * / 0px 3px 7px 0px rgb (17,17,17), / * 2-я тень * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3-я тень * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4-я тень * / background-color: rgb (83,87,93); верх: 3 пикселя; }

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

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

a: target {box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), вставка 0px 1px 1px 0px rgba (250, 250, 250, .2) , вставка 0px -10px 35px 5px rgba (0, 0, 0, .5); цвет фона: rgb (83,87,93); верх: 3 пикселя; цвет: #fff; тень текста: 0px 0px 3px rgb (250,250,250); }

Дальнейшее чтение: Использование: target псевдокласс

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

a: active: before, a: target: before {top: -5px; цвет фона: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), вставка 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); цвет фона: rgb (135,187,83); } Эффект перехода
Наконец, чтобы эффект кнопки работал плавно, мы также применим следующий эффект перехода.

Этот фрагмент ниже специально добавит переход к свойству цвета и текстовой тени на 350 мс в элементе привязки.

a {переход: цвет 350 мс, тень от текста 350 мс; -o-переход: цвет 350 мс, тень от текста 350 мс; -moz-transition: цвет 350 мс, тень от текста 350 мс; -webkit-transition: цвет 350 мс, тень от текста 350 мс; }

Этот второй фрагмент ниже добавит переход для свойств background-color и box-shadow в световой индикатор.

a: target + span {transition: background-color 350ms, box-shadow 700ms; -o-переход: цвет фона 350 мс, тень окна 700 мс; -moz-transition: цвет фона 350 мс, тень окна 700 мс; -webkit-transition: цвет фона 350 мс, тень окна 700 мс; } Конечный результат
Мы прошли все необходимые стили, теперь вы можете увидеть конечный результат вживую, а также скачать исходный файл по ссылкам ниже.
Бонус: как выключить
А вот и бонус. Если вы попробовали кнопку из приведенной выше демонстрации, вы заметили, что кнопку можно нажать только один раз, то есть для ее включения, так как же нам ее выключить?

К сожалению, нам приходится делать это с помощью jQuery, но это тоже действительно просто. Ниже представлен весь необходимый нам код jQuery.

$ (документ) .ready (функция () {$ (“https://www.hongkiat.com/blog/css3-on-off-button/#button”) .click (function () {$ (this). toggleClass (‘on’);});});

Приведенный выше фрагмент добавит класс ON в якорь, и мы использовали функцию toggleClass из jQuery, чтобы добавить его. Итак, когда нажата кнопка #, jQuery проверит, был ли добавлен класс ON или нет: когда это не так, jQuery добавит класс, а если он был добавлен, jQuery удалит класс.

Примечание. Не забудьте включить библиотеку jQuery.

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

a.on {box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), вставка 0px 1px 1px 0px rgba (250, 250, 250, .2) , вставка 0px -10px 35px 5px rgba (0, 0, 0, .5); цвет фона: rgb (83,87,93); верх: 3 пикселя; цвет: #fff; тень текста: 0px 0px 3px rgb (250,250,250); } a: active: before, a.on: before {top: -5px; цвет фона: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), вставка 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); цвет фона: rgb (135,187,83); }

Наконец, попробуем в браузере.