CSS3 Tutorial Создание гладкой кнопки включения / выключения
Использование кнопки до сих пор является предпочтительным способом взаимодействия с электронным материалом; например, радиоприемник, телевизор, музыкальный проигрыватель и даже смартфон с функцией голосовых команд по-прежнему нуждаются как минимум в одной или двух физических кнопках.
Кроме того, в этот цифровой век кнопка также эволюционировал в своей цифровой форме, что делает его более интерактивным, динамичным и действительно простым в создании по сравнению с физической кнопкой.
Итак, на этот раз мы собираемся создать удобную интерактивную кнопку, основанную на этом превосходном дизайне в Dribbble с использованием только CSS.
Ну, давайте просто начнем.
HTML
Мы начнем с кнопки, разместив следующую разметку в нашем HTML-документе. Это действительно просто, кнопка будет основана на теге привязки, у нас также есть пролет рядом с ним, чтобы создать индикатор, а затем они обернуты вместе в HTML5 раздел тег.
& # XF011;
Вот как изначально выглядит наша кнопка.
Основной стиль
В этом разделе мы начнем работать над Стили.
Сначала мы применяем этот темный фон из тонкого рисунка к документу тела и центрируем раздел. Затем мы также удалим пунктирную контур на : фокус а также : активный ссылка на сайт.
body background: url ('images / micro_carbon.png'); section margin: 150px auto 0; ширина: 75 пикселей; высота: 95 пикселей; положение: относительное; выравнивание текста: по центру; : активный,: фокус контур: 0; Использование собственного шрифта
Для значка кнопки мы будем использовать собственный шрифт из Font Awesome, а не изображение. Таким образом, иконка будет легко адаптироваться к стилю и масштабироваться с помощью таблицы стилей..
Загрузите шрифт, сохраните файлы шрифтов (eot, woff, ttf и svg) в шрифты папку, а затем поместите следующий код в таблицу стилей, чтобы определить новое семейство шрифтов.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); Формат src: url ("fonts / fontawesome-webfont.eot? #iefix") ('eot'), формат url ("fonts / fontawesome-webfont.woff") ('woff'), url ("fonts / fontawesome-" формат webfont.ttf ") ('trueetype'), формат url (" fonts / fontawesome-webfont.svg # FontAwesome ") ('svg'); Вес шрифта: нормальный; стиль шрифта: нормальный; 
значок питания что нам нужно для этой кнопки представлено в номере Unicode F011; если вы внимательно посмотрите на разметку HTML выше, мы поместили этот числовой символ & # XF011; внутри тега привязки, но так как мы не определили семейство шрифтов в стиле кнопки значок еще должен быть правильно отображен.
Дальнейшее чтение: Юникод и HTML: символы документа
Стилизация кнопки
Прежде всего, нам нужно определить обычай семейство шрифтов для кнопки.
Наша кнопка будет кругом, мы можем добиться эффекта круга, используя граница радиуса свойство и установите значение, по крайней мере, половину кнопки ширина.
Поскольку мы используем шрифт для значка, мы можем легко установить цвет и добавить текст-тень для значка в таблице стилей, а также.
Далее мы также создадим скошенный эффект для кнопки. Этот эффект довольно сложный. Во-первых, нам нужно применить цвет фона: RGB (83,87,93); для основы цвета кнопки, то мы добавляем до четырех слоев коробчатая тень.
a font-family: "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), / * 1st Shadow * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / врезка 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3-я тень * / вставка 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4-я тень * / ширина: 70px; высота: 70 пикселей; граница: 0; радиус границы: 35 пикселей; выравнивание текста: по центру; высота строки: 79 пикселей;
Снаружи кнопки есть также большой круг, и мы будем использовать :до Псевдо-элемент для этого, а не добавление дополнительной разметки.
a: before content: ""; ширина: 80 пикселей; высота: 80 пикселей; дисплей: блок; z-индекс: -2; положение: абсолютное; цвет фона: RGB (26,27,29); слева: -5px; верх: -2px; радиус границы: 40 пикселей; тень от рамки: 0px 1px 0px 0px rgba (250,250,250,0,1), врезка 0px 1px 2px rgba (0, 0, 0, 0.5);
Дальнейшее чтение: CSS: до и после псевдо-элементы (Hongkiat.com)
Индикатор
Под кнопкой находится небольшой индикатор, обозначающий состояние включения и выключения. Ниже мы применяем красный цвет для цвета света, потому что питание изначально отключено, мы также добавляем коробчатого тень имитировать эффект блеска света.
+ span display: block; ширина: 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), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2nd Shadow * / врезка 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3-я тень * / врезка 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4-я тень * / background-color: rgb (83,87,93); верх: 3 пикселя;
Кроме того, после нажатия кнопки она должна оставаться нажатой, а значок должен «светиться», показывая, что питание включено..
Чтобы добиться такого эффекта, мы нацелим кнопку, используя : цель Псевдо-класс, затем измените цвет значка на белый и добавьте текст-тень также с белым цветом.
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);
Дальнейшее чтение: Использование: цель Псевдо-класс
Нам также нужно настроить коробчатого тень в кружке за пределами кнопки, как показано ниже.
a: active: before, a: target: before top: -5px; цвет фона: RGB (26,27,29); тень от рамки: 0px 1px 0px 0px rgba (250,250,250,0,1), врезка 0px 1px 2px rgba (0, 0, 0, 0.5);
Световой индикатор изменит цвет с красного на зеленый по умолчанию, чтобы подчеркнуть, что питание уже включено.
a: target + span box-shadow: врезка 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 мс в якорном элементе.
переход: цвет 350 мс, текстовая тень 350 мс; o-переход: цвет 350 мс, текстовая тень 350 мс; -моз-переход: цвет 350мс, текст-тень 350мс; -Вебкит-переход: цвет 350мс, текст-тень 350мс;
Этот второй фрагмент ниже добавит переход для фоновый цвет а также коробчатого тень свойство в световом индикаторе.
a: target + span transition: background-color 350ms, box-shadow 700ms; -переход: фоновый цвет 350мс, коробка-тень 700мс; -моз-переход: цвет фона 350мс, коробка-тень 700мс; -webkit-transition: цвет фона 350мс, box-shadow 700мс;
Конечный результат
Мы прошли через все стили, которые нам нужны, теперь вы можете увидеть конечный результат вживую, а также скачать исходный файл по ссылкам ниже.
- демонстрация
- Скачать исходный код
Бонус: как его отключить
Здесь идет бонус. Если вы попробовали кнопку из вышеприведенной демонстрации, вы заметили, что кнопку можно нажать только один раз, то есть, чтобы включить ее, как нам ее отключить??.
К сожалению, мы должны сделать это с помощью jQuery, но это действительно просто. Ниже приведен весь код jQuery, который нам нужен..
$ (document) .ready (function () $ ('# button'). click (function () $ (this) .toggleClass ('on'););); Фрагмент выше добавит класс ON в привязку, и мы использовали toggleClass функция из jQuery, чтобы добавить его. Итак, когда #button при нажатии jQuery проверит, был ли добавлен класс ON: если это не так, jQuery добавит класс, а если он был добавлен, jQuery удалит класс.
Замечания: Не забудьте включить библиотеку jQuery.
Теперь нам нужно немного изменить стиль. Просто замените все : цель Псевдо-элемент с .на селектор класса, следующим образом:
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); тень от рамки: 0px 1px 0px 0px rgba (250,250,250,0,1), врезка 0px 1px 2px rgba (0, 0, 0, 0.5); a.on + span box-shadow: врезка 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135,187,83,0,5); цвет фона: RGB (135 187,83);
Наконец, давайте попробуем это в браузере.
- демонстрация
- Скачать исходный код
