Dzięki stylom CSS 3.0, które wprowadziły kilka ciekawych rzeczy, można zrezygnować z ciężkich grafik na stronach www. Chciałem wam pokazać jak za pomocą styli CSS można uzyskać ciekawy efekt.
Do sekcji head w pliku html/php albo do pliku zewnętrznego (np. style.css) dodajemy klasę niceButton, wielkość buttona (small, medium albo large) oraz kolor (wraz z hoverem).

.niceButton{
background: #222 url(/images/alert-overlay.png) repeat-x;
display: inline-block;
padding: 5px 10px 6px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
border-bottom: 1px solid rgba(0,0,0,0.25);
position: relative;
cursor: pointer;
}

różne wielkości i kolory

/* Sizes ---------- */
.small.niceButton {
font-size: 11px;
}
.medium.niceButton {
font-size: 13px;
}
.large.niceButton {
font-size: 14px;
padding: 8px 14px 9px;
}
 
/* Colors ---------- */
.green.niceButton, .green.niceButton:visited		{ background-color: #91bd09; }
	.green.niceButton:hover						{ background-color: #749a02; }
	.blue.niceButton, .blue.niceButton:visited		{ background-color: #2daebf; }
	.blue.niceButton:hover							{ background-color: #007d9a; }
	.red.niceButton, .red.niceButton:visited			{ background-color: #e33100; }
	.red.niceButton:hover							{ background-color: #872300; }
	.magenta.niceButton, .magenta.niceButton:visited		{ background-color: #a9014b; }
	.magenta.niceButton:hover							{ background-color: #630030; }
	.orange.niceButton, .orange.niceButton:visited		{ background-color: #ff5c00; }
	.orange.niceButton:hover							{ background-color: #d45500; }
	.yellow.niceButton, .yellow.awesome:visited		{ background-color: #ffb515; }
	.yellow.niceButton:hover							{ background-color: #fc9200; }

Kod html dla buttona wygląda tak:

duży czarny button
<a class="large niceButton" href="#">Nazwa buttona »</a>

średni niebieski button
<a class="medium blue niceButton"> href="#">Nazwa buttona »</a>
xHej! Jeśli macie jakieś pytania, problemy bądź sugestie to komentujcie pod tematem.

Demo niceButton

miłego klikania =)

xHej! Jeśli macie jakieś pytania, problemy bądź sugestie to komentujcie pod tematem