Jakub Opublikowano 16 Lipca 2015 Autor Udostępnij Opublikowano 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.) <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] Odnośnik do komentarza Udostępnij na innych stronach Więcej opcji udostępniania...
Rekomendowane odpowiedzi