Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Dziś chciałbym zaprezentować zestaw prostych i ciekawych przycisków na stronę internetową. Przygotowałem go dla czytelników by stanowił źródło inspiracji i kilku sztuczek w CSS.

Wszystkie przyciski składają się z elementu a, który może być zastąpiony elementem button w zależności od przeznaczenia. Wewnątrz każdego przycisku umieszczony jest jeden lub dwa tagi span, co pozwala odseparować warstwy. Dzięki elementom wewnętrznym zyskujemy również możliwość pokazania dodatkowych pseudo-elementów.

Każdy przycisk posiada klasę .btn, która definiuje wszystkie cechy wspólne. Dalej zostały one pogrupowane według typu animacji np. .btn-border czy .btn-fill. Na koniec każdy przycisk otrzymał specyficzny modyfikator. Wewnątrz niego zdefiniowane zostały cechy charakteryzujące konkretny przycisk np. .btn-border__1.

Ostatecznie przykładowy kod HTML wygląda następująco:

Button

Mam nadzieję, że przyciski z demo spodobają Ci się i będziesz mógł z nich skorzystać w przyszłości.


Popularne wpisy

Kodowanie

Responsywne menu — 3 sprawdzone rozwiązania

Responsywne menu — 3 sprawdzone rozwiązania

Czytaj to
Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Mixiny SCSS – czyli jak uprzyjemniam sobie pracę

Czytaj to

Felietony

Błędy początkujących webmasterów, których warto unikać

Błędy początkujących webmasterów, których warto unikać

Czytaj to
Dlaczego frameworki HTML często nie mają sensu?

Dlaczego frameworki HTML często nie mają sensu?

Czytaj to

Inspiracje

Zestaw prostych i ciekawych przycisków na stronę

Zestaw prostych i ciekawych przycisków na stronę

Czytaj to
Najlepsze strony, z których pobierzesz darmowe zdjęcia

Najlepsze strony, z których pobierzesz darmowe zdjęcia

Czytaj to

Newsletter

Maksymalnie raz w miesiącu dostaniesz powiadomienie o nowych wpisach.
Zapisz się do newslettera — ja nie śmiecę.

Ta strona wykorzystuje pliki cookies wyłącznie w celach statystycznych.