CSS3 Инструкция Създаване на елегантен бутон за включване / изключване
Досега използването на бутон е предпочитаният начин за взаимодействие с електронни неща; като радио, телевизия, музикален плейър и дори смартфон с функция за гласова команда все още се нуждаят от поне един или два физически бутона.
Освен това в тази цифрова епоха бутон еволюира и в цифровата си форма, което я прави по-интерактивна, динамична и истинска, лесна за реализиране, в сравнение с физическия бутон.
Така че този път ще създадем гладък и интерактивен бутон, базиран на този отличен дизайн в Dribbble, използвайки само CSS.
Е, нека започнем.
HTML
Ще започнем с бутона, като поставим следната маркировка в нашия HTML документ. Това е много просто, бутонът ще се основава на котва маркер, ние също имаме педя до него да се създаде индикаторната светлина, след което те се обгръщат заедно в HTML5 раздел свободен край.
& # XF011;
Ето как първоначално изглежда нашият бутон.
Основен стил
В този раздел ще започнем да работим върху Стилове.
Първо нанасяме този тъмен фон от финия модел върху документа на тялото и центрираме раздел. След това ще премахнем и пунктирания очертание върху : фокус и :активен връзка.
body фон: url ('images / micro_carbon.png'); раздел margin: 150px auto 0; ширина: 75px; височина: 95 пиксела; позиция: относителна; text-align: center; : активен,: фокус контур: 0; Използване на персонализиран шрифт
За иконата на бутона ще използваме персонализиран шрифт от Font 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 ("шрифтове / шрифтове") webfont.ttf ") формат ('truetype'), url (" fonts / fontawesome-webfont.svg # FontAwesome ") формат ('svg'); тегло на шрифта: нормално; стил на шрифта: нормален; 
Най- икона за мощност което ни е необходимо за този бутон е представено в Unicode номер F011; ако погледнете по-отблизо HTML-маркировката по-горе, сме сложили този цифров знак & # XF011; в котвения маркер, но тъй като не сме дефинирали персонализирания шрифтово семейство в стила на бутоните иконата все още не е правилно изведена.
Допълнителна информация: Unicode и HTML: символи на документи
Стил на бутона
Първо, трябва да дефинираме обичая шрифтово семейство за бутона.
Нашият бутон ще бъде кръг, можем да постигнем ефекта на кръга с помощта на граничен радиус и задайте стойността най-малко на половината от бутоните широчина.
Тъй като използваме шрифт за иконата, можем лесно да зададем цвят и добавете текстови сянка и за иконата в таблицата със стилове.
След това ще създадем скосен ефект за бутона. Този ефект е доста труден. Първо, трябва да приложим фонов цвят: rgb (83,87,93); за цветовата база на бутона, след това добавяме до четири слоя макетни сенки.
a семейство на шрифтове: "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-ва сянка * / вмъкване 0px 1px 1px 0px rgba (250) , 250, 250, .2), / * 3-та сянка * / вмъкване 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4-та сянка * / ширина: 70px; височина: 70px; граница: 0; граничен радиус: 35 пиксела; text-align: center; височина на линията: 79px;
Има и по-голям кръг от външната страна на бутона и ние ще използваме :преди псевдо-елемент вместо да добавяте допълнителен маркер.
a: преди съдържание: ""; ширина: 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)
Светлинен индикатор
Под бутона има малка светлина, която определя състоянието на включване и изключване. По-долу ние прилагаме червено за цвета на светлината, защото захранването е първоначално OFF, ние също добавяме кутия сянка да имитира блясъка на светлината.
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%;
Ефектът
В този момент нашият бутон започва да изглежда добре и трябва само да добавим някои ефекти върху него, например, когато бутонът е „натиснат“, искаме бутонът да изглежда като натиснат и задържан.
За да постигнете ефекта, първо кутия сянка в бутона ще бъде нулирана и позицията ще бъде намалена малко. Също така трябва малко да настроим интензитетите на другите три сенки, за да съответстваме на позицията на бутона.
a: активна box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1-ва сянка * / 0px 3px 7px 0px rgb (17,17,17), / * 2-ра сянка * / вмъкване 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;
Освен това, след като бутонът е натиснат, той трябва да остане натиснат и иконата трябва да „свети“, за да покаже, че захранването е включено.
За да постигнем такъв ефект, ще насочим бутона с помощта на :мишена псевдо-клас, след това сменете цвета на иконата на бяло и добавете a текстови сянка с бял цвят.
a: цел 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; текстова сянка: 0px 0px 3px rgb (250,250,250);
Допълнителна информация: Използване: target псевдо-клас
Ние също трябва да коригираме кутия сянка в кръга извън бутона, както следва.
a: active: преди, 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);
Преходен ефект
И накрая, за да се постигне гладък ефект на бутона, ще приложим и следния ефект на преход.
Този фрагмент по-долу специално ще добави прехода към цвят и собственост текстови сянка за 350ms в котвения елемент.
a преход: цвят 350ms, текстова сянка 350ms; -о-преход: цвят 350ms, текстова сянка 350ms; -moz-transition: цвят 350ms, text-shadow 350ms; -webkit-transition: цвят 350ms, text-shadow 350ms;
Този втори фрагмент по-долу ще добави прехода за Цвят на фона и кутия сянка в светлинния индикатор.
a: target + span transition: фон 350ms, box-shadow 700ms; -о-преход: фонов цвят 350ms, box-shadow 700ms; -moz-transition: фон 350ms, box-shadow 700ms; -webkit-transition: фон 350ms, box-shadow 700ms;
Краен резултат
Преминахме през всички стилове, от които се нуждаем, сега можете да видите крайния резултат на живо, както и да изтеглите изходния файл от връзките по-долу.
- Демонстрация
- Изтеглете Източник
Бонус: Как да го изключите
Тук идва бонусът. Ако сте изпробвали бутона от горната демонстрация, забелязахте, че бутонът може да се кликне само веднъж, това е, за да го включите, така че как да го изключим?.
За съжаление трябва да го направим с jQuery, но това е много просто. По-долу е нужен целия код jQuery.
$ (document) .ready (function () $ ('# button')) кликнете (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); отгоре: 3px; цвят: #fff; текстова сянка: 0px 0px 3px rgb (250,250,250); a: активен: преди, 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);
И накрая, нека опитаме в браузъра.
- Демонстрация
- Изтеглете Източник
