Samouczek CSS3 Utwórz elegancki przycisk włączania / wyłączania
Używanie przycisku jest jak dotąd preferowanym sposobem interakcji z materiałami elektronicznymi; takie jak radio, telewizor, odtwarzacz muzyki, a nawet smartfon z funkcją poleceń głosowych nadal wymaga co najmniej jednego lub dwóch fizycznych przycisków.
Ponadto w tej erze cyfrowej przycisk ewoluował również w formie cyfrowej, co czyni go bardziej interaktywnym, dynamicznym i prawdziwym łatwym do wykonania w porównaniu z fizycznym przyciskiem.
Tym razem zamierzamy stworzyć gładki i interaktywny przycisk oparty na tym doskonałym projekcie w Dribbble, używając tylko CSS.
Cóż, zacznijmy.
HTML
Zaczniemy od przycisku, umieszczając następujący znacznik na naszym dokumencie HTML. To naprawdę proste, przycisk będzie oparty na tagu kotwicy, mamy też przęsło obok niego, aby utworzyć światło wskaźnika, a następnie są one owinięte razem w HTML5 Sekcja etykietka.
& # xF011;
Oto jak wygląda nasz przycisk.
Podstawowa stylizacja
W tej sekcji zaczniemy pracować nad Style.
Najpierw stosujemy to ciemne tło z Subtelnego Wzoru na dokumencie ciała i wyśrodkowujemy Sekcja. Następnie usuniemy również kropkowane zarys na :skupiać i :aktywny połączyć.
body background: url ('images / micro_carbon.png'); sekcja margin: 150px auto 0; szerokość: 75px; wysokość: 95px; pozycja: względna; wyrównywanie tekstu: środek; : active,: focus outline: 0; Używanie niestandardowej czcionki
Dla ikony przycisku użyjemy niestandardowej czcionki z Font Awesome, a nie obrazu. W ten sposób ikona będzie łatwo stylowa i skalowalna poprzez arkusz stylów.
Pobierz czcionkę, zapisz pliki czcionek (eot, woff, ttf i svg) w pliku czcionki folder, a następnie umieść następujący kod w arkuszu stylów, aby zdefiniować nową rodzinę czcionek.
@ font-face font-family: "FontAwesome"; src: url ("fonts / fontawesome-webfont.eot"); src: url (format „fonts / fontawesome-webfont.eot? #iefix”) („eot”), url („fonts / fontawesome-webfont.woff”) format („woff”), url („czcionki / fontawesome- webfont.ttf ”) format („ truetype ”), url („ fonts / fontawesome-webfont.svg # FontAwesome ”) w formacie („ svg ”); waga czcionki: normalna; styl czcionki: normalny; 
The ikona mocy że potrzebujemy tego przycisku jest reprezentowany w numerze Unicode F011; jeśli przyjrzysz się uważnie znacznikowi HTML powyżej, umieściliśmy ten znak numeryczny & # xF011; wewnątrz znacznika zakotwiczenia, ale ponieważ nie zdefiniowaliśmy niestandardowego rodzina czcionek w stylu przycisku ikona nie jest jeszcze poprawnie renderowana.
Dalsza lektura: Unicode i HTML: Znaki dokumentu
Stylizacja przycisku
Przede wszystkim musimy zdefiniować zwyczaj rodzina czcionek dla przycisku.
Nasz przycisk będzie kółkiem, możemy uzyskać efekt koła za pomocą promień graniczny właściwość i ustaw wartość przynajmniej na połowę przycisku szerokość.
Ponieważ używamy czcionki do ikony, możemy łatwo ustawić kolor i dodaj cień tekstu dla ikony w arkuszu stylów.
Następnie utworzymy efekt fazowany dla przycisku. Ten efekt jest dość trudny. Po pierwsze, musimy złożyć wniosek background-color: rgb (83,87,93); dla bazy kolorów przycisku dodajemy do czterech warstw cienie skrzyniowe.
a font-family: "FontAwesome"; kolor: rgb (37,37,37); tekst-cień: 0px 1px 1px rgba (250,250,250,0,1); rozmiar czcionki: 32pt; Blok wyświetlacza; pozycja: względna; dekoracja tekstowa: brak; background-color: rgb (83,87,93); box-shadow: 0px 3px 0px 0px rgb (34,34,34), / * 1. cień * / 0px 7px 10px 0px rgb (17,17,17), / * 1 cień * / wstawka 0px 1px 1px 0px rgba (250 , 250, 250, .2), / * 3rd Shadow * / inset 0px -12px 35px 0px rgba (0, 0, 0, .5); / * 4. cień * / szerokość: 70px; wysokość: 70px; granica: 0; granica-promień: 35px; wyrównywanie tekstu: środek; wysokość linii: 79px;
Na zewnętrznej stronie przycisku znajduje się również większy okrąg i będziemy używać :przed pseudoelement zamiast tego dodawać dodatkowe znaczniki.
a: before content: ""; szerokość: 80px; wysokość: 80px; Blok wyświetlacza; z-index: -2; pozycja: absolutna; kolor tła: rgb (26,27,29); lewo: -5px; top: -2px; granica-promień: 40px; box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), wstawka 0px 1px 2px rgba (0, 0, 0, 0,5);
Dalsza lektura: CSS: przed i: po pseudoelementy (Hongkiat.com)
Kontrolka
Pod przyciskiem znajduje się małe światełko określające stan włączenia i wyłączenia zasilania. Poniżej stosujemy kolor czerwony dla światła, ponieważ moc jest początkowo wyłączona, dodajemy również box-shadow naśladować efekt błysku światła.
a + span display: block; szerokość: 8px; wysokość: 8px; kolor tła: rgb (226,0,0); box-shadow: wstawka 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (226,0,0,0,5); border-radius: 4px; oba czyste; pozycja: absolutna; bottom: 0; po lewej: 42%;
Efekt
W tym momencie nasz przycisk zaczyna wyglądać dobrze i musimy tylko dodać do niego pewne efekty, na przykład, gdy przycisk jest „kliknięty”, chcemy, aby przycisk wyglądał tak, jakby był wciśnięty i przytrzymany.
Aby osiągnąć efekt, pierwszy box-shadow przycisk zostanie wyzerowany, a pozycja zostanie nieco obniżona. Musimy również dostosować intensywność pozostałych trzech cieni, aby dopasować pozycję przycisku.
a: active box-shadow: 0px 0px 0px 0px rgb (34,34,34), / * 1st Shadow * / 0px 3px 7px 0px rgb (17,17,17), / * 2nd Shadow * / inset 0px 1px 1px 0px rgba (250, 250, 250, .2), / * 3rd Shadow * / inset 0px -10px 35px 5px rgba (0, 0, 0, .5); / * 4th Shadow * / background-color: rgb (83,87,93); top: 3px;
Ponadto, po kliknięciu przycisku, powinien on pozostać wciśnięty, a ikona powinna „świecić”, wskazując, że zasilanie jest włączone.
Aby osiągnąć taki efekt, wycelujemy w przycisk za pomocą :cel pseudoklasa, następnie zmień kolor ikony na biały i dodaj cień tekstu z białym kolorem.
a: target box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), wstawka 0px 1px 1px 0px rgba (250, 250, 250, .2) , wstawka 0px -10px 35px 5px rgba (0, 0, 0, .5); background-color: rgb (83,87,93); top: 3px; kolor: #fff; tekst-cień: 0px 0px 3px rgb (250,250,250);
Dalsza lektura: Używanie: target pseudoklasa
Musimy również dostosować box-shadow w kółku poza przyciskiem, w następujący sposób.
a: active: before, a: target: before top: -5px; kolor tła: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), wstawka 0px 1px 2px rgba (0, 0, 0, 0,5);
Wskaźnik światła zmieni kolor z domyślnego koloru czerwonego na zielony, aby podkreślić, że zasilanie jest już włączone.
a: target + span box-shadow: wstawka 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135 187,83,0,5); background-color: rgb (135,187,83);
Efekt przejścia
Na koniec, aby efekt przycisku działał płynnie, zastosujemy również następujący efekt przejścia.
Poniższy fragment dodaje konkretnie przejście do kolor własność i cień tekstu dla 350ms w elemencie kotwicy.
a przejście: kolor 350ms, tekst-cień 350ms; -o-przejście: kolor 350ms, cień tekstu 350ms; -moz-transition: kolor 350ms, text-shadow 350ms; -webkit-transition: kolor 350ms, text-shadow 350ms;
Ten drugi fragment poniżej doda przejście dla kolor tła i box-shadow właściwość wskaźnika świetlnego.
a: target + span przejście: kolor tła 350ms, box-shadow 700ms; -o-przejście: kolor tła 350ms, box-shadow 700ms; -moz-transition: kolor tła 350ms, box-shadow 700ms; -webkit-transition: kolor tła 350ms, box-shadow 700ms;
Ostateczny wynik
Przeszliśmy przez wszystkie style, których potrzebujemy, teraz możesz zobaczyć końcowy wynik na żywo, a także pobrać plik źródłowy z poniższych linków.
- Próbny
- Pobierz źródło
Bonus: jak go wyłączyć
Oto bonus. Jeśli próbowałeś przycisku z powyższej wersji demonstracyjnej, zauważyłeś, że przycisk można kliknąć tylko raz, aby go włączyć, więc jak go wyłączyć?.
Niestety musimy to zrobić za pomocą jQuery, ale jest to również bardzo proste. Poniżej znajduje się cały potrzebny kod jQuery.
$ (document) .ready (function () $ ('# button'). kliknij (function () $ (this) .toggleClass ('on'););); Powyższy fragment doda klasę ON do kotwicy i użyliśmy toggleClass funkcja z jQuery, aby ją dodać. Więc kiedy #przycisk zostanie kliknięty, jQuery sprawdzi, czy klasa ON została dodana, czy nie: gdy nie jest, jQuery doda klasę, a jeśli została dodana, jQuery usunie klasę.
Uwaga: Nie zapomnij dołączyć biblioteki jQuery.
Teraz musimy trochę zmienić styl. Po prostu wymień wszystkie :cel pseudoelement z .na selektor klasy w następujący sposób:
a.on box-shadow: 0px 0px 0px 0px rgb (34,34,34), 0px 3px 7px 0px rgb (17,17,17), wstawka 0px 1px 1px 0px rgba (250, 250, 250, .2) , wstawka 0px -10px 35px 5px rgba (0, 0, 0, .5); background-color: rgb (83,87,93); top: 3px; kolor: #fff; tekst-cień: 0px 0px 3px rgb (250,250,250); a: active: before, a.on: before top: -5px; kolor tła: rgb (26,27,29); box-shadow: 0px 1px 0px 0px rgba (250,250,250,0,1), wstawka 0px 1px 2px rgba (0, 0, 0, 0,5); a.on + span box-shadow: wstawka 0px 1px 0px 0px rgba (250,250,250,0,5), 0px 0px 3px 2px rgba (135 187,83,0,5); background-color: rgb (135,187,83);
Na koniec spróbujmy w przeglądarce.
- Próbny
- Pobierz źródło
