Jak zrobić w prosty sposób własne przyciski na stronę? CSS w czystej postaci. Wystarczą nam cztery reguły CSS i dwa pliki graficzne:

Przycisk w cssPrzyciski css - obraz buttona

Dłuższy plik ma maksymalną szerokość przyszłego przycisku. Dlaczego obrazy są zduplikowane? Dla efektu naciśnięcia – powyżej jest wersja wklęsła, poniżej – wypukła.

Kod HTML przycisków

<a href="http://kissdesign.pl" class="button"><span>Kliknij na mnie :)</span></a>

Kod CSS przycisku

a.button{
	background: url(btn0.png) right -31px no-repeat;
	padding: 0 21px 0 0;
	height: 31px;
	display: block;
	float: left;
	text-decoration: none;
	line-height: 31px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	outline: none;
} 
a.button:active{
	background-position: right 0;
} 
a.button span{
	background: url(btn1.png) 0 -31px no-repeat;
	padding-left: 21px;
	height: 31px;
	display: block;
	font-size: 12px;
	color: #fff;
} 
a.button:active span{
	background-position: 0 0;
}

Ściągnij gotowca

Pobierz gotowe reguły przycisków CSS wraz z grafikami.

Podoba Ci się ten wpis? Interesuje Cię tematyka związana z zastosowaniem CSS? Podziel się wrażeniami w komentarzu!