Przyciski (Buttons)

Sprawdź angielską wersje tej lekcji w naszym rozszerzonym tutorialu Bootstrap.

Przyciski są jednymi z najpopularniejszych i najczęściej poszukiwanych komponentów w Bootstrapie. Oferują wiele opcji, formularzy i funkcjonalności, a w tej lekcji poznamy niektóre z nich.

Najpierw spójrzmy na przycisk z naszego Call to Action.

                                      
                                        <a class="btn btn-primary" href="#" role="button">Learn with me</a>
                                      
                                    

Podstawy

Mamy tu 2 klasy.

Pierwsza klasa btn to tzw. klasa bazowa. Definiuje podstawowe właściwości przycisku i jest obecna w każdym przycisku, niezależnie od jego typu. Pamiętaj, że zawsze warto ją uwzględniać.

Druga klasa btn-primary to tzw. klasa modyfikująca. Definiuje konkretny wygląd danego przycisku. W tym przypadku -primary oznacza charakterystyczny kolor niebieski, który jest głównym kolorem projektowym systemu MDB.

Zauważ, że tutaj używamy elementu <a>. Klasy .btn są projektowane do użycia z elementem <button>. Jednakże możesz również używać tych klas na elementach <a>, jeśli chcesz używać ich jako linków. Pamiętaj tylko, aby dodać do nich dodatkowy atrybut role="button".

Kolory

Łatwo możesz zmienić kolor przycisku, zmieniając klasę modyfikującą.

Kontekstowy

Na przykład, MDB zawiera kilka predefiniowanych stylów przycisków, z których każdy ma swoje własne znaczenie semantyczne.

                                      
                                        <button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
                                      
                                    

Neutralny

Przyciski neutralne dostarczają dodatkowe kolory jasne i ciemne.

                                      
                                        <button type="button" class="btn btn-light" data-mdb-ripple-color="dark">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
                                      
                                    

Link

Przycisk typu link jest podobny do przycisku trzeciorzędnego opisanego poniżej (i często jest używany jako zamiennik). Różnica polega na tym, że przycisk typu link ma tło po najechaniu kursorem oraz domyślne wypełnienie (padding).

                                      
                                        <button type="button" class="btn btn-link" data-mdb-ripple-color="dark">Link</button>
                                      
                                    

Hierarchia

Przyciski, jako jedne z kluczowych elementów interfejsu użytkownika, muszą mieć swoją własną hierarchię. Oznacza to, że użytkownik powinien być w stanie łatwo rozpoznać, który przycisk jest najważniejszy (przycisk główny), który jest mniej istotny (przycisk drugorzędny) i który prezentuje zupełnie dodatkowe informacje (przycisk trzeciorzędny).

Elementy z mocnymi, wypełnionymi tłami i cieniami przyciągają największą uwagę, dlatego przycisk główny jest budowany w ten sposób.

Delikatne tło bez cieni jest mniej angażujące, dlatego idealnie nadaje się dla przycisku drugorzędnego.

Brak tła i cieni sprawia, że element jest najmniej widoczny. Te cechy charakteryzują przycisk trzeciorzędny.

Uwaga: Przycisk trzeciorzędny może wymagać dodatkowych marginesów. Bez dodatkowych marginesów krawędź przycisku będzie przylegać do sąsiednich elementów (co czasami jest pożądanym efektem). Jeśli potrzebujesz marginesu - po prostu dodaj klasy narzędziowe do marginesów, takie jak mx-2.

                                      
                                        <button type="button" class="btn btn-primary me-1">Primary</button>
<button type="button" class="btn btn-secondary me-1">Secondary</button>
<button type="button" class="btn btn-tertiary mx-2" data-mdb-ripple-color="light">Tertiary</button>
                                      
                                    

Kontur

Potrzebujesz przycisku, ale nie chcesz intensywnych kolorów tła? Zamień domyślne klasy modyfikujące na klasy .btn-outline-*, aby usunąć wszystkie obrazy i kolory tła na dowolnym przycisku.

                                      
                                        <button type="button" class="btn btn-outline-primary" data-mdb-ripple-color="dark">
  Primary
</button>
                                      
                                    

Zaokrąglony

Dodaj klasę .btn-rounded, aby zaokrąglić przycisk.

                                      
                                        <button type="button" class="btn btn-primary btn-rounded">Primary</button>
                                      
                                    

Rozmiary

Chcesz przyciski większe lub mniejsze? Dodaj .btn-lg dla większych i .btn-sm dla mniejszych rozmiarów.

                                      
                                        <button type="button" class="btn btn-primary btn-sm">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary btn-lg">Button</button>
                                      
                                    

Pływający

Użyj klasy .btn-floating, aby stworzyć przycisk w kształcie koła.

Aby to działało poprawnie, musisz umieścić w nim ikonę. Tekst nie będzie pasował. Setki dostępnych ikon znajdziesz w naszej dokumentacji ikon.

                                      
                                        <button type="button" class="btn btn-primary btn-floating">
  <i class="fas fa-download"></i>
</button>
                                      
                                    

Efekt falowania

Pewnie zauważyłeś ten uroczy efekt falowania, kiedy klikasz przycisk.

To jest tzw. "efekt falowania" (ripple effect), charakterystyczny dla projektu Material Design. Automatycznie dodawany jest do każdego przycisku. Domyślnie ma kolor biały, jednak możemy go zmieniać.

Na przykład, jeśli chcesz zmienić kolor efektu fali, możesz to zrobić, dodając atrybut data-mdb-ripple-color do przycisku i zdefiniować w nim kolor.

                                      
                                        <button data-mdb-ripple-color="danger" type="button" class="btn btn-primary">Primary</button>
                                      
                                    

Teraz jest czerwony.

Okej, wróćmy teraz do naszego projektu. Chciałbym aby przycisk w naszym Call to Action:

1. Miał nieco jaśniejszy kolor (klasa btn-secondary powinna to załatwić)
2. Był zaokrąglony (skorzystamy z klasy btn-rounded)
3. Miał efekt fali w kolorze głównym (skorzystamy z atrybutu data-mdb-ripple-color)
4. Miał ikonę (skorzystamy z ładnej ikony czapki studenta z kolekcji ikon MDB)

Zmodyfikuj kod przycisku w swoim projekcie następująco:

                                      
                                        <a class="btn btn-secondary btn-rounded btn-lg m-2" data-ripple-color="primary" href="#" role="button">Learn with me<i class="fas fa-graduation-cap ms-2"></i></a>
                                      
                                    

Dobrze, wygląda świetnie! Jeśli chcesz dowiedzieć się więcej o przyciskach, zajrzyj na stronę dokumentacji przycisków.

Teraz przejdźmy do następnej lekcji.