Tworząc layouty stron, niezmienną ich częścią są buttony, których wygląd i umiejscowienie niejednokrotnie przesądza o skuteczności projektowanych i oprogramowywanych Langing Page. Dodatkowo ich stworzenie i późniejsze poprawki wymagają wkładu pewnej ilości czasu: projekt w Photoshopie, pocięcie szablonu, dostosowanie do sprite. I w momencie gdy jednak stwierdzimy, że to nie jest to, znów cały proces trzeba rozpoczynać od początku.
Po raz kolejny rozwiązanie podsuwa nam CSS3, za pomocą którego możemy tworzyć buttony do złudzenia podobne do stworzonych z pocięcia layoutów. Ponadto jeżeli chcielibyśmy zmienić jego wygląd wystarczy wyedytować plik CSS, zamiast wracać do projektu graficznego.
Standardowy button w CSS
Najpierw zacznijmy od stworzenia zwykłego buttona w CSS. Nic wyszukanego, ot zwykły button z zadeklarowanymi stylami czcionki, marginesu, koloru tła, obramowania i czcionki.
-
a.button{
-
border: 1px solid #0094D8;
-
background: #0094D8;
-
width: 200px;
-
padding: 10px 0;
-
text-align: center;
-
display: block;
-
margin:15px auto;
-
}
Dodanie cienia i zaokrąglonych rogów w CSS3
Mając już przygotowany button, czas na wykorzystanie CSS3 i dodanie cienia i zaokrąglenie rogów buttona, co zdecydowanie poprawi jego wygląd. By uzyskać efekt zaokrąglenia rogów wykorzystamy: border-radius, -moz-border-radius i -webkit-border-radius, natomiast do efektu cienia: text-shadow, -moz-box-shadow, -webkit-box-shadow oraz box-shadow, tworząc cień zarówno dla tekstu jak i dla całego buttona.
-
a.borderAndShadow{
-
border-radius: 5px;
-
-moz-border-radius: 5px;
-
-webkit-border-radius: 5px;
-
text-shadow: 1px 1px 1px #555555;
-
-moz-box-shadow: 0 1px 4px #222;
-
-webkit-box-shadow: 0 1px 4px #222;
-
box-shadow: 0 1px 4px #222;
-
}
Gradient w CSS3
Ostatnim elementem buttona będzie dodanie gradientu, który zdecydowanie poprawia jego wygląd. Sam gradient jest stosunkowo prosty do uzyskania:
-
a.gradient{
-
background: #81E3F4; /* stare przegladarki */
-
background: -moz-linear-gradient(top, #81E3F4 0%, #0094D8 100%); /* firefox */
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#81E3F4), color-stop(100%,#0094D8)); /* webkit */
-
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#81E3F4', endColorstr='#0094D8',GradientType=0 ); /* ie */
-
}
Jeżeli jednak nie chcemy ręcznie edytować wartości koloru wypełnienia, w sieci znajduje się całkiem sporo generatorów gradientów w CSS3 – oto kilka z nich:
Na koniec trochę akcji
Mając już gotowy button, możemy pokusić się o dodanie pseudoklas :hover i :active, dla ktorych można zdefiniować inne modele gradientu.
-
a.hoverAndActive:hover{
-
background: #D5EEF2; /* stare przegladarki */
-
background: -moz-linear-gradient(top, #D5EEF2 0%, #6EB5D3 100%); /* firefox */
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D5EEF2), color-stop(100%,#6EB5D3)); /* webkit */
-
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#D5EEF2', endColorstr='#6EB5D3',GradientType=0 ); /* ie */
-
}
-
-
a.hoverAndActive:active{
-
background: #00CFEF; /* stare przegladarki */
-
background: -moz-linear-gradient(top, #00CFEF 0%, #0077B7 100%); /* firefox */
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00CFEF), color-stop(100%,#0077B7)); /* webkit */
-
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00CFEF', endColorstr='#0077B7',GradientType=0 ); /* ie */
-
}
2 komentarze do “Jak stworzyć button CSS3 w kilka minut”
Przycisk „zobacz demo” nie działa pod IE (wersja osiem!)
Nawet się nie hoveruje, kursor zostaje domyślny, podświetlenia nie ma, a klikanie nic nie pomaga 
Chciałem sprawdzić te demo pod IE, bo oczywiście nie jestem samobójcą, żeby używać IE na codzień, no i właśnie widać dlaczego 
Ładne i przydatne. Dzięki i oby więcej takich artów