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.


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.