Zablokowane Kolorowy button

Jakub · 16 Lipca 2015

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.)

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. [code]<a href="adres_do_przekierowania" class="btn">Hello !</a>[/code]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-1.jpg[/img]
2. CSS

Całość będzie umieszczona w klasie ?btn?. Wszystkie niżej wypisane parametry powinieneś wpisywać właśnie w tę klasę.

[code].btn {
}[/code]

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.

[code]padding: 10px 20px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #1f5d9b;[/code]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-2.jpg[/img]
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.

[code]  background: -moz-linear-gradient(
        top,
        #87c2f0 0%,
        #4281b9);
background: -webkit-gradient(
        linear, left top, left bottom,
        from(#87c2f0),
        to(#4281b9));[/code]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-3.jpg[/img]
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) )

[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]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-4.jpg[/img]
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.

[code]  .btn:hover {
 
background: -moz-linear-gradient(
        top,
        #1381cf 0%,
        #093a63);
    background: -webkit-gradient(
        linear, left top, left bottom,
        from(#1381cf),
        to(#093a63));
     
         
}[/code]

Ta zawartość jest ukryta. Jeśli chcesz mieć do niej dostęp, proszę

http://developerski.com/wp-content/uploads/2014/04/css3-button-tutorial-5.jpg[/img]