Домашня » Кодування » Підручник з CSS3 Створіть елегантну кнопку On / Off

    Підручник з CSS3 Створіть елегантну кнопку On / Off

    Ця стаття є частиною нашої "Серія навчальних посібників HTML5 / CSS3" - присвячений допомозі зробити вас кращим дизайнером та / або розробником. Натисніть тут щоб побачити більше статей з тієї ж серії.

    Використання кнопки досі є кращим способом взаємодії з електронним матеріалом; такі як радіо, телевізор, музичний плеєр і навіть смартфон, який має функцію голосових команд, все ще потребує принаймні однієї або двох фізичних кнопок.

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

    Отже, цього разу ми збираємося створити сліпу та інтерактивні кнопки, які базуються на цій чудовій конструкції в 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);  

    Нарешті, спробуємо її в браузері.

    • Демо
    • Завантажити джерело