W Magazynie T3 prezentujemy szeroką gamę tutoriali od prostych porad dotyczących CSS do zaawansowanych projektów PHP. Tym razem nasz tutorial jest skierowany do tych, którzy nadal są początkujący, jeśli chodzi o CSS.

Jedne z najczęstszych pytań dotyczących CSS jakie zadają początkujący w tej dziedzinie dotyczą tego, jak stworzyć buttony. Pytanie to wydaje się proste, jednak ciężko dać na nie odpowiedź. Mamy bowiem wiele sposobów na ich stworzenie, ale niektóre z nich mogą prowadzić nas w złą stronę. Kiedy zaczynałem pracę w CSS i uczyłem się wszystkich składni, to właśnie butony były jednymi z najbardziej uporczywych problemów z jakimi się zetknąłem. Wydawało mi się, że zawsze robiłem to źle. Teraz przejdziemy wspólnie przez prosty, a zarazem elastyczny proces, który można wykorzystać przy tworzeniu buttonów wszelkiego rodzaju. Ważniejsze jednak od końcowego rezultatu jest dokładne zrozumienie każdego kroku jaki poczynimy.

Krok 1: HTML

Wierzcie lub nie, ale to jest jedna z najtrudniejszych części. Dla doświadczonego programisty, wydaje się to pewnie bardzo proste. Dla początkujących jednak, wiedza od czego zacząć przy tworzeniu buttona może okazać się kłopotliwa.

Z funkcjonalnego punktu widzenia, wszystko, co chcemy zrobić, to stworzyć linka, który przeniesie nas do czegoś nowego. A robi to właśnie prosty link HTML. Często przy projektowaniu stron internetowych, wybór czy kodujemy coś jako button zależy jedynie od estetyki i nie musi nieść za sobą żadnych szczególnych funkcjonalności.

Oto powszechnie stosowany w tym celu zwięzły fragment kodu HTML, który doskonale spełnia swoje zadanie:

Kliknij

Nie używaj „bloków” na siłę

Jednym z problemów, jaki napotkałem podczas kodowania było to, że myślałem, iż muszę korzystać z bloków, kiedy chcę cokolwiek stworzyć. Takie myślenie okazało się być błędne.

Jest to zupełnie niepotrzebne i może stwarzać problemy zarówno z kliknięciem, jak i hoverem. W powyższym przykładzie, cały nasz przycisk będzie linkiem. Jeśli użyjemy bloków i nadamy im style, tylko część tekstowa buttona będzie linkiem, co oznacza, że ??użytkownik może kliknąć na niego i nie uzyskać pożądanej akcji.

Dlaczego warto korzystać z klas?

Być może najważniejszą rzeczą dotyczącą tego fragmentu kodu jest to, że dodaliśmy klasę, którą ogólnie oznaczamy jako „button”. Istnieje kilka powodów, dla których tak właśnie postąpiliśmy.
Przede wszystkim chodzi o to, żeby nie było trzeba definiować każdego przycisku po kolei. Praktycznie nigdy nie zdarza się tak, że będziesz chciał dodać button do każdego linku na stronie. Jednakże, być może będziesz chciał używać tego buttona tylko do niektórych linków. Dlatego właśnie stosuje się klasy zamiast ID. W ten sposób, gdy chcemy przekształcić zwykły link tekstowy do ładnego buttona, wystarczy dodać klasę „button” i gotowe!

Krok 1 Podgląd

W tym momencie powinieneś uzyskać jedynie zwykły tekstowy link z domyślnym stylem.

Krok 2: Podstawowe style

Teraz, kiedy mamy gotowy nasz kod HTML, nadszedł czas, aby przeskoczyć do CSS. Pamiętaj, że nazwa klasy „button” jest tylko przykładowa, więc upewnij się, że będziesz używał tej samej nazwy w tym kroku:

.button {/* tutaj kod */}

Pierwszą rzeczą, którą chcemy zrobić w naszym CSS to zdefiniowanie podstawowego pola, czyli inaczej kształtu naszego przycisku. Oto style, których używałem. Zauważ, że mój wybór kolorów i wymiary są całkowicie opcjonalne, dlatego też zachęcam do korzystania z takich ustawień, jakich chcesz.

.button {
 
    /*Krok 2: Podstawowe style*/
    display: block;
    height: 200px;
    width: 200px;
    background: #0bdf00;
    border: 2px solid rgba(33, 68, 72, 0.59);
}

Najważniejszą rzeczą jaką zrobiłem było ustawienie „display: block”. To pozwoli nam zmienić link tekstowy na większe pole o określonej szerokości i wysokości. Potem po prostu ustawimy rozmiar i kolor tła, a następnie dodamy ramkę. Będę używał „rgba”, aby kod był przyjaźniejszy dla starszych przeglądarek.

Krok 2 Podgląd

Po drugim etapie powinieneś otrzymać dość nudne okienko z tekstem wewnątrz.

Krok 3: Style tekstu

Następna rzecz w kolejce, to zmiana stylu brzydkiego tekstu. Aby mieć pewność, że zrozumiesz każdy krok, będę po prostu dodawał komentarze do tego, co już wcześniej zbudowaliśmy:

.button {
 
    /*Krok 2: Podstawowe style*/
    display: block;
    height: 200px;
    width: 200px;
    background: #0bdf00;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    /*Krok 3: Style tekstu*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/200px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
 }
 
/*Krok 3: Linkuj styl*/
a.button {
    text-decoration: none;
}

Dodałem kolor tekstu, który jest zasadniczo ciemniejszym odcieniem koloru przycisku. Sztuczka ta polega na ustawieniu koloru tekstu na czarny oraz jednocześnie zmniejszeniu krycia przez rgba. Następnie, wycentrowałem tekst i zadeklarowałem kilka ustawień czcionki za pomocą shorthandów.

Shorthand

Shorthandy w CSS to nic innego jak krótszy sposób na deklarowanie opcji oraz stylów (w tym wypadku czcionki). Dzięki temu możliwe jest zapisanie kilku opcji w jednej linii. Najpierw zadeklarowałem pogrubienie, następnie rozmiar/wysokość i na koniec rodzinę czcionek. Zauważ, że wysokość czcionki ustawiona została dokładnie tak samo jak wysokość buttona. To chyba najprostszy sposób na upewnienie się, że nasz tekst jest wycentrowany w pionie.

Krok 3 Podgląd

Po wykonaniu kroku trzeciego Twój button powinien wreszcie zacząć wyglądać jak button!

Krok 4: Ozdobne style CSS3

Poprzez poprzedni krok udało nam się otrzymać dobry oraz sprawny button, który nie wygląda tak źle. Można go jednak jeszcze upiększyć. Ważnym elementem naszej pracy jest jednak to, że ten button powinien wyglądać idealnie w większości przeglądarek. Możemy więc teraz przejść do dodawania nowszych dobrodziejstw języka CSS, nie martwiąc się zbytnio o starsze przeglądarki. Szczerze mówiąc nie zwracam tu uwagi zbytnio na to, czy IE da radę dobrze obsłużyć dodane w tym kroku style, ponieważ w obecnym stanie mój button powinien działać dobrze również dla IE.

Możemy dać się ponieść naszej wyobraźni, pisząc pięćdziesiąt linii CSS, aby nasz przycisk błyszczał i wyglądał piękne, ale w tym przypadku nie będziemy przesadzać:

.button {
 
    /*Krok 2: Podstawowe style*/
    display: block;
    height: 200px;
    width: 200px;
    background: #0bdf00;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    /*Krok 3: Style tekstu*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/200px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  
    /*Krok 4: Ozdobne style CSS3*/
    background: linear-gradient(top, #0bdf00, #11610d);
    border-radius: 50px;
    box-shadow: 0 8px 0 #063c03;
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2); 
}
 
/*Krok 3: Linkuj styl*/
a.button {
    text-decoration: none;
}

Każde z tych ustawień może okazać się dla Ciebie trudne do zrozumienia, dlatego też opowiem po kolei o wszystkich. Po pierwsze, dodałem gradient, który używa koloru domyślnego buttona i powoli ściemnia się. Zostawiłem tym samym poprzedni kolor tła powyżej tej sekcji jako awaryjny.

Następnie zająłem się ramką (border-radius). Zdecydowałem się na wyjątkowo zaokrąglone rogi, które nadadzą buttonowi kształt obłego kwadratu. Ponieważ chcę, aby wszystkie moje rogi były takie same, po prostu zadeklarowałem jedną wartość i ona automatycznie zaadaptowana została dla każdego z rogów.

W końcu dodałem cień. Cień dla buttona, jak i ten dla tekstu są trochę różne. Przy cieniu dla całego kształtu, ustawiłem pionowe przesunięcie, ale bez poziomego, a także ustawiłem wtapianie na 0. Takie ustawienia daje nam ładny mały efekt 3D, który nie wymaga zbyt wiele pracy czy też kodu. Dla cienia do tekstu, zastosowałem także przesunięcie pionowe i ustawiłem kolor na biały przy 20% krycia. Jest to bardzo łatwy sposób aby stworzyć efekt odciśnięcia tekstu w przycisku, tak jakby był w nim wytłoczony.

Użyj narzędzia Prefixr dla uniwersalizacji

Zauważ, że powyższy kod nie jest kompatybilny ze wszystkimi przeglądarkami. W początkowej fazie eksperymentowania z CSS nienawidzę mieszać w kodzie przez dodawanie przeróżnych prefiksów. Można przez to narobić sobie dużo problemów.
Kiedy osiągnę określony efekt przy użyciu podstawowej składni, wrzucam cały ten kod do małego darmowego narzędzia Prefixr (http://prefixr.com/), które przetwarza i zwraca mój kod z automatycznie dodanymi wszystkimi niezbędnymi elementami dla każdej przeglądarki.

.button {
 
    /*Krok 2: Podstawowe style*/
    display: block;
    height: 200px;
    width: 200px;
    background: #0bdf00;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    /*Krok 3: Style tekstu*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/200px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  
    /*Krok 4: Ozdobne style CSS3*/
    background: -webkit-linear-gradient(top, #0bdf00, #11610d);
    background: -moz-linear-gradient(top, #0bdf00, #11610d);
    background: -o-linear-gradient(top, #0bdf00, #11610d);
    background: -ms-linear-gradient(top, #0bdf00, #11610d);
    background: linear-gradient(top, #0bdf00, #11610d);
 
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
 
    -webkit-box-shadow: 0 8px 0 #063c03;
    -moz-box-shadow: 0 8px 0 #063c03;
    box-shadow: 0 8px 0 #063c03;
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);

} 

/*Krok 3: Linkuj styl*/
a.button {
    text-decoration: none;
}

Krok 4 Podgląd

Po wykonaniu kroku czwartego Twój button powinien posiadać znacznie lepszy kształt niż do tej pory. To już prawie koniec!

Krok 5: Zachowanie przy najechaniu na button

Ostatnim krokiem w naszym procesie tworzenia jest określenie zachowania się buttona przy najechaniu na niego. Po prostu lepsze wrażenie sprawia jakakolwiek większa akcja niż jedynie domyślna zmiana kursora. Po raz kolejny możemy puścić wodze wyobraźni, ale na potrzeby tego przykładu posłużę się jedynie prostą zmianą jasności gradientu:

.button {
 
    /*Krok 2: Podstawowe style*/
    display: block;
    height: 200px;
    width: 200px;
    background: #0bdf00;
    border: 2px solid rgba(33, 68, 72, 0.59);
 
    /*Krok 3: Style tekstu*/
    color: rgba(0, 0, 0, 0.55);
    text-align: center;
    font: bold 3.2em/200px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  
    /*Krok 4: Ozdobne style CSS3*/
    background: -webkit-linear-gradient(top, #0bdf00, #11610d);
    background: -moz-linear-gradient(top, #0bdf00, #11610d);
    background: -o-linear-gradient(top, #0bdf00, #11610d);
    background: -ms-linear-gradient(top, #0bdf00, #11610d);
    background: linear-gradient(top, #0bdf00, #11610d);
 
    -webkit-border-radius: 50px;
    -khtml-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
 
    -webkit-box-shadow: 0 8px 0 #063c03;
    -moz-box-shadow: 0 8px 0 #063c03;
    box-shadow: 0 8px 0 #063c03;
 
    text-shadow: 0 2px 2px rgba(255, 255, 255, 0.2);
}

/*Krok 3: Linkuj styl*/
a.button {
    text-decoration: none;
}

/*Krok 5: Zachowanie przy najechaniu na button*/
a.button:hover {
    background: #11610d;
    background: -webkit-linear-gradient(top, #11610d, #0bdf00);
    background: -moz-linear-gradient(top, #11610d, #0bdf00);
    background: -o-linear-gradient(top, #11610d, #0bdf00);
    background: -ms-linear-gradient(top, #11610d, #0bdf00);
    background: linear-gradient(top, #11610d, #0bdf00);
}

Teraz po najechaniu kursorem na przycisk, jego kolor/ jasność będzie się zmieniała. Jest to subtelny efekt, ale również i wystarczająco zauważalny.

Gotowe!

Krok piąty był już ostatni! Efektem naszej pracy powinien być ciekawy buton stworzony wyłącznie z CSS i HTML. Co jednak ważniejsze, posiadasz także podstawową wiedze na temat pracy z CSS przy tworzeniu butonów.

Wniosek

Nauczyliśmy się dzisiaj kilku ważnych rzeczy. Po pierwsze, dowidzieliśmy, że możemy używać podstawowych znaczników HTML jako punkt wyjścia dla naszego buttona oraz że dobrze jest stylizować butony przy pomocy klas wielokrotnego użytku. Posiadamy już także wiedzę, jak zacząć pracę nad ulepszaniem wizualnym od podstawowego stylu, który będzie działać dobrze we wszystkich przeglądarkach i stopniowo dodawać do niego nowe funkcjonalności, przy pomocy technik, które niekoniecznie muszą być powszechnie dostępne. Wreszcie zobaczyliśmy, jak kodować podstawowe właściwości w CSS3, aż dostaniemy oczekiwany efekt oraz jak to wszystko przetwarza narzędzie Prefixr (http://prefixr.com/) rozszerzając nasz kod tak, aby był kompatybilny z różnymi przeglądarkami, o ile to oczywiście możliwe.