Kolorowy button

[Jakub]

Siemanko.

W tym temacie dowiecie się jak za pomocą tylko i wyłącznie kodu, otrzymać efektowny przycisk.

Przycisk ten będzie działał we wszystkich nowych przeglądarkach (Chrome, Opera, Safari, Mozilla etc.)

<span style="font-weight: bold">1. HTML

Zaczniemy od napisania bardzo krótkiego kodu, który pozwoli nam wyświetlić button. Nie będziemy używać do tego żadnych tabelek, lecz klasy. </span> [code]<a href="adres_do_przekierowania" class="btn">Hello !</a>[/code] [img]http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-1.jpg[/img]
<span style="font-weight: bold">2. CSS

Całość będzie umieszczona w klasie ?btn?. Wszystkie niżej wypisane parametry powinieneś wpisywać właśnie w tę klasę. </span> [code].btn { }[/code] <span style="font-weight: bold">3. Styl przycisku

Na początek określimy obramowanie oraz kształt naszego przycisku. Dodamy także webkit border radius dla poprawnego działania w przeglądarkach Safari oraz Chrome. </span>
  [code]padding: 10px 20px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #1f5d9b;[/code] [img]http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-2.jpg[/img]
<span style="font-weight: bold">4. Kolory/gradienty

Utworzymy teraz elementy gradientu dla naszego przycisku. Sposób działania gradientu jest bardzo prosty. Górny kolor (#87c2f0) oznacza górny kolor gradientu, zaś ten niżej dolny (#4281b9). Pierwsze tło jest dla Firefox?a drugie dla Safari i Chrome. </span> [code] background: -moz-linear-gradient( top, #87c2f0 0%, #4281b9); background: -webkit-gradient( linear, left top, left bottom, from(#87c2f0), to(#4281b9));[/code] [img]http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-3.jpg[/img]
<span style="font-weight: bold">5. Styl tekstu

Następnie w naszej klasie musimy zdefiniować rodzaj, rozmiar i wielkość czcionki. Dodalismy dla lepszego efektu także cień :

- 1 wartość ? poziomy dystans (0px)
- 2 wartość ? pionowy dystans (1px)
- 3 wartość ? rozmycie cienia (2px)
- 4 wartość ? kolor cienia (rgba(000,000,000,0.7) ) </span> [code]font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 17px; color: #ffffff; text-shadow: 0px 1px 2px rgba(000,000,000,0.7); text-decoration: none;[/code] [img]http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-4.jpg[/img]
<span style="font-weight: bold">6. Styl ?Hover?, czyli po najechaniu na przycisk

Aby dodać nowy button po najechaniu na istniejący, należy stworzyć klasę .btn:hover . W naszym przypadku zmieni się tylko kolor buttonu. </span> [code] .btn:hover { background: -moz-linear-gradient( top, #1381cf 0%, #093a63); background: -webkit-gradient( linear, left top, left bottom, from(#1381cf), to(#093a63)); }[/code] [img]http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-5.jpg[/img]