Kolorowe buttony z wykorzystaniem płynnego przejścia w CSS3


3 czerwca 2012 / Michał Kortas


W dzisiejszym tutorialu przygotujemy ciekawe, kolorowe buttony, bez używania elementów graficznych. Będą one podlegały procesowi płynnego przejścia, przy zastosowaniu poleceń (transition) zawartych w specyfikacji CSS3. Cały efekt wspierana jest przez wszystkie przeglądarki, z wyjątkiem IE. Nie obsługuje on płynnej transformacji elementów. Tak czy inaczej, już wkrótce rozwiązanie to będzie można stosować z pełnym powodzeniem, dlatego przyjrzyjmy się mu bliżej. Przygotujemy kilka wersji kolorystycznych, zamieniając tylko używane gradienty. Zacznijmy od koloru niebieskiego.

Wstawmy poniższy kod do naszego dokumentu HTML.

Teraz dodajemy gradient. Aby był on dobrze wyświetlany we wszystkich przeglądarkach, trzeba się trochę nagimnastykować.

Na koniec musimy ostylować pozostałe, standardowe własności.

Właściwie to wszystko. Teraz aby dodać inne wersje kolorystyczne, musimy użyć innych klas w naszym buttonie. Przygotowałem ich pięć, a możecie zobaczyć je poniżej.

A oto kody potrzebne gradientów:

Gradient czerwony

Gradient niebieski

Gradient żółty

Gradient fioletowy

Na koniec udostępniam linki do źródła, jak i przykład online.

Pobierz pliki źródłowe | Zobacz DEMO

Wszelkie pytania i wskazówki dotyczące tego poradnika proszę zostawiać tylko i wyłącznie w komentarzach, poniżej niniejszego wpisu.



2 odpowiedzi na “Kolorowe buttony z wykorzystaniem płynnego przejścia w CSS3”

  1. Mr.Mr pisze:

    O ile dobrze rozumiem to wykorzystujesz to właściwość „transition” w CSS3 „animation” to coś innego – tytuł artykułu może być więc mylący… chyba…

    co do gradientu jest tak fajna stronka, która ułatwia życie:

    http://www.colorzilla.com/gradient-editor/

    :)

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *