Підручник з CSS3 Створіть елегантну кнопку On / Off
Використання кнопки досі є кращим способом взаємодії з електронним матеріалом; такі як радіо, телевізор, музичний плеєр і навіть смартфон, який має функцію голосових команд, все ще потребує принаймні однієї або двох фізичних кнопок.
Крім того, в цьому цифровому віці кнопки еволюціонував також у своїй цифровій формі, що робить його більш інтерактивним, динамічним і реально легким у порівнянні з фізичною кнопкою.
Отже, цього разу ми збираємося створити сліпу та інтерактивні кнопки, які базуються на цій чудовій конструкції в Dribbble, використовуючи лише CSS.
Ну, давайте тільки почнемо.
HTML
Ми почнемо кнопку, розмістивши наступну розмітку на нашому HTML-документі. Це дуже просто, кнопка буде заснована на якірній тезі, ми також маємо a span поруч з нею створюється індикатор, а потім вони обертаються разом у HTML5 розділ тег.
& # xF011;
Ось як виглядає наша кнопка спочатку.
Базовий стиль
У цьому розділі ми почнемо роботу над Стилі.
По-перше, ми застосуємо цей темний фон із Тонкого малюнка на документі тіла і центруємо розділ. Потім ми також видалимо точку контур на : фокус і : active посилання.
body background: url ('images / micro_carbon.png'); розділ margin: 150px auto 0; ширина: 75px; висота: 95px; позиція: відносна; text-align: center; : активний,: фокус контур: 0; Використання спеціального шрифту
Для значка кнопки ми будемо використовувати спеціальний шрифт із шрифту Awesome, а не зображення. Таким чином, значок буде легко спрощувати стиль і масштабувати через таблицю стилів.
Завантажте шрифт, збережіть файли шрифтів (eot, woff, ttf і svg) у вікні шрифтів а потім помістіть наступний код у таблицю стилів, щоб визначити нову сімейство шрифтів.
@ font-face сім'я шрифтів: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); формат: 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'); font-weight: нормальний; стиль шрифту: нормальний; 
The значок живлення що нам потрібно для цієї кнопки, представлено в Unicode F011; якщо ви уважно подивіться на розмітку HTML вище, ми ввели цей числовий символ & # xF011; в тезі прив'язки, але так як ми не визначили користувальницький сімейство шрифтів у стилі кнопки піктограма ще не відображається належним чином.
Подальше читання: Unicode та HTML: символи документів
Стиль кнопки
Перш за все, ми повинні визначити звичай сімейство шрифтів для кнопки.
Наша кнопка буде коло, ми зможемо досягти ефекту кола за допомогою кордон-радіус властивість і встановити значення принаймні на половині кнопок ширина.
Оскільки, ми використовуємо шрифт для іконки, ми можемо легко встановити колір і додати text-shadow для піктограми у таблиці стилів.
Далі ми також створимо скошений ефект для кнопки. Цей ефект досить складний. По-перше, ми повинні подати заявку фоновий колір: 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), / * 1-ша тінь * / 0px 7px 10px 0px rgb (17,17,17), / * 1nd Shadow * / inset 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3-я тінь * / вставка 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4-а тінь * / ширина: 70px; висота: 70px; кордон: 0; кордон-радіус: 35px; text-align: center; висота рядка: 79px;
Існує також велике коло за межами кнопки, і ми будемо використовувати : раніше псевдоелемент замість додавання додаткової розмітки.
a: before content: ""; ширина: 80px; висота: 80px; дисплей: блок; z-індекс: -2; позиція: абсолютна; фоновий колір: rgb (26,27,29); ліворуч: -5px; зверху: -2px; кордон-радіус: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0.1), вставка 0px 1px 2px rgba (0, 0, 0, 0.5);
Подальше читання: CSS: до і після псевдоелементи (Hongkiat.com)
Світловий індикатор
Під кнопкою є невелике світло для позначення стану живлення та вимкнення. Нижче ми застосовуємо червоний колір для кольору світла, оскільки потужність спочатку відключена, ми також додаємо box-shadow наслідувати ефект просвіту світла.
a + span display: block; ширина: 8px; висота: 8px; фоновий колір: 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); кордон-радіус: 4px; ясно: обидва; позиція: абсолютна; знизу: 0; ліворуч: 42%;
Ефект
На даний момент наша кнопка починає виглядати добре, і нам потрібно лише додати деякі ефекти, наприклад, коли кнопка натискається, ми хочемо, щоб кнопка виглядала так, як вона натиснута і утримується вниз.
Для досягнення ефекту, перший box-shadow в кнопці буде обнулений і позиція буде знижена трохи. Також потрібно трохи відрегулювати інтенсивність інших трьох тіней, щоб відповідати положенню кнопки.
a: активний box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1-я тінь * / 0px 3px 7px 0px rgb (17,17,17), / * друга тінь * / вставка 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3-я тінь * / вставка 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4-а тінь * / фоновий колір: rgb (83,87,93); зверху: 3px;
Крім того, після натискання кнопки вона повинна залишитися натиснутою, а значок повинен "світити", щоб вказати, що живлення увімкнено..
Для досягнення такого ефекту ми будемо націлювати кнопку за допомогою кнопки : target псевдоклас, потім змініть колір піктограми на білий і додайте a text-shadow з білим кольором.
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); зверху: 3px; колір: #fff; text-shadow: 0px 0px 3px rgb (250,250,250);
Подальше читання: Використання: target псевдоклас
Ми також повинні налаштувати box-shadow у колі за межами кнопки, наступним чином.
a: active: before, a: target: до 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: вставка 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); фоновий колір: rgb (135,187,83);
Ефект переходу
І, нарешті, щоб зробити ефект кнопки успішним, ми також застосуємо наступний ефект переходу.
Цей фрагмент нижче спеціально додасть перехід до колір майно і text-shadow для 350мс в анкерному елементі.
a перехід: колір 350ms, text-shadow 350ms; -о-перехід: колір 350мс, текст-тінь 350мс; -moz-перехід: колір 350ms, text-shadow 350ms; -webkit-перехід: колір 350ms, text-shadow 350ms;
Цей другий фрагмент нижче додасть перехід для Колір фону і box-shadow властивість у світловому індикаторі.
a: target + span перехід: фоновий колір 350ms, box-shadow 700ms; -о-перехід: фоновий колір 350ms, box-shadow 700ms; -moz-перехід: фоновий колір 350ms, box-shadow 700ms; -webkit-перехід: фоновий колір 350ms, box-shadow 700ms;
Кінцевий результат
Ми пройшли всі необхідні стилі, тепер ви можете побачити кінцевий результат у прямому ефірі, а також завантажити вихідний файл за посиланнями нижче.
- Демо
- Завантажити джерело
Бонус: Як вимкнути його
А ось бонус. Якщо ви спробували кнопку з вищезгаданої демонстрації, ви помітили, що кнопку можна натиснути лише один раз, а саме, щоб увімкнути її, так як її вимкнути?.
На жаль, ми повинні зробити це з jQuery, але це дійсно просто. Нижче наведено всі необхідні коди jQuery.
$ (document) .ready (function () $ ('# button')) натисніть (function () $ (this) .toggleClass ('on'););); Вищезгаданий фрагмент додасть клас ON до якоря, і ми використали toggleClass функцію з jQuery, щоб додати її. Отже, коли #button jQuery перевірить, чи був доданий клас ON чи ні: коли це не так, jQuery додасть клас, і якщо він буде доданий, jQuery видалить клас.
Примітка: Не забудьте включити бібліотеку jQuery.
Тепер треба трохи змінити стиль. Просто замініть всі : target псевдоелемент з .на селектор класу, а саме:
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); зверху: 3px; колір: #fff; text-shadow: 0px 0px 3px rgb (250,250,250); a: active: перед, a.on: до 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: вставка 0px 1px 0px 0px rgba (250,250,250,0.5), 0px 0px 3px 2px rgba (135,187,83,0.5); фоновий колір: rgb (135,187,83);
Нарешті, спробуємо її в браузері.
- Демо
- Завантажити джерело
