Webdesign & UX

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

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.

<span class="button niebieski">Wyślij</span>

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

.niebieski {
background: #00d1ed;
background: -moz-linear-gradient(top, #00d1ed 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00d1ed), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00d1ed 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00d1ed 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00d1ed 0%,#009ec3 100%);
background: linear-gradient(top, #00d1ed 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00d1ed', endColorstr='#009ec3',GradientType=0 );
}

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

.button {
float: right;
padding: 5px 15px;
text-align: right;
cursor: pointer;
color: white;
font-family: calibri;
letter-spacing: -1px;
text-shadow: 0 0 1px #000;
border: 1px solid gray;

/*Zaokrąglanie rogów*/
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

/*Transformacja*/
-moz-transition: 0.3s ease-in; 
-webkit-transition: 0.3s ease-in; 
-o-transition: 0.3s ease-in; 
transition: 0.3s ease-in;

}
.button:hover {
padding: 5px 15px 5px 20px;
border: 1px solid #000;
}

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.

<span class="button niebieski">Wyślij</span> /*NIEBIESKI*/
<span class="button czerwony">Wyślij</span> /*CZERWONY*/
<span class="button zielony">Wyślij</span> /*ZIELONY*/
<span class="button zolty">Wyślij</span> /*ŻÓŁTY*/
<span class="button fioletowy">Wyślij</span> /*FIOLETOWY*/

A oto kody potrzebne gradientów:

Gradient czerwony

.czerwony {
background: #ff3019;
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404));
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%);
background: linear-gradient(top, #ff3019 0%,#cf0404 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 );
}

Gradient niebieski

.zielony {
background: #e0ed28;
background: -moz-linear-gradient(top, #e0ed28 1%, #abdc28 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#e0ed28), color-stop(100%,#abdc28));
background: -webkit-linear-gradient(top, #e0ed28 1%,#abdc28 100%);
background: -o-linear-gradient(top, #e0ed28 1%,#abdc28 100%);
background: -ms-linear-gradient(top, #e0ed28 1%,#abdc28 100%);
background: linear-gradient(top, #e0ed28 1%,#abdc28 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0ed28', endColorstr='#abdc28',GradientType=0 );
}

Gradient żółty

.zolty {
background: #f1e767;
background: -moz-linear-gradient(top, #f1e767 0%, #feb645 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1e767), color-stop(100%,#feb645));
background: -webkit-linear-gradient(top, #f1e767 0%,#feb645 100%);
background: -o-linear-gradient(top, #f1e767 0%,#feb645 100%);
background: -ms-linear-gradient(top, #f1e767 0%,#feb645 100%);
background: linear-gradient(top, #f1e767 0%,#feb645 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1e767', endColorstr='#feb645',GradientType=0 );
}

Gradient fioletowy

.fioletowy {
background: #e570e7;
background: -moz-linear-gradient(top, #e570e7 0%, #c85ec7 47%, #a849a3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e570e7), color-stop(47%,#c85ec7), color-stop(100%,#a849a3));
background: -webkit-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: -o-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: -ms-linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);
background: linear-gradient(top, #e570e7 0%,#c85ec7 47%,#a849a3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e570e7', endColorstr='#a849a3',GradientType=0 );
}

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.

komentarze 2

  • Awatar
    Mr.Mr

    3 czerwca 2012 15:15

    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/

    :)

    Odpowiedz
    • Awatar
      Michał Kortas

      3 czerwca 2012 18:51

      Faktycznie, niefortunnie dobrałem słowo „animacja”. Poprawione ;-)

      Odpowiedz

Zostaw odpowiedź