Melle Wynia

Live resultaat (open WebKit- of Geckobrowser om te bekijken).

Afbeelding: button in verschillende browsers en OS'en.

Code

Allereerst wil ik melden dat er geen copyright of whatsoever rust op deze stukjes code. Ik wil iedereen aanmoedigen deze technieken te gaan gebruiken.

HTML

<a href="#">Label</a>

CSS (css3_ipad-button.css). - Zie toelichting in en onder de code.

a
{
	padding:7px 20px;
	
	border:1px solid rgb(99,99,99); /* Normaal (IE) support. */
	border:1px solid rgba(99,99,99,0.9); /* Geen (IE) support, dus ignored. */
	
	border-radius:5px; 
	-webkit-border-radius:5px; 
	-moz-border-radius:5px;
	
	box-shadow:inset 1px 1px 1px rgba(99,99,99,0.4);
	-webkit-box-shadow:inset 1px 1px 1px rgba(99,99,99,0.4);
	-moz-box-shadow:inset 1px 1px 1px rgba(99,99,99,0.4);
	
	/* Een kleine schaduw wordt toegevoegd om ervoor te
	zorgen dat de button er verzonken uitziet.
	
	"inset"			Schaduw in het element.
	"1px"			Gepositioneerd vanaf left.	
	"1px"			Gepositioneerd vanaf top.
	"1px"			Grootte van schaduw.
	"rgba(99,99,99,0.4)" 	Kleur, een transparant grijs. */
	
	background:#597eaa; /* Normaal (IE) support. */
	background:-webkit-gradient( /* Geen (IE) support, dus ignored. */
		linear, 
		0 0, 
		0 100%, 
		color-stop(0,#97adc8), 
		color-stop(0.5, #6b8bb2), 
		color-stop(0.5, #597eaa), 
		color-stop(1, #5b80ab)
	);
	background:-moz-linear-gradient( /* Geen (IE) support, dus ignored. */
		#97adc8 0%, /* Vanaf top 0%. Gradient #1 geopend. */
		#6b8bb2 50%, /* Vanaf top 50%. Gradient #1 gesloten. */
		#597eaa 50%, /* Vanaf top 50%. Gradient #2 geopend. */
		#5b80ab 100% /* Vanaf top 100%. Gradient #2 gesloten. */
	);
	
	color:#fff; 
	font:bold 12px/11px Helvetica Neue, Arial, sans-serif; 
	text-decoration:none;
	text-shadow:0px -1px 1px rgba(0,0,0,0.75); /* Geen (IE) support, dus ignored. */
	
	/* Om de verzonkenheid van de button te accentuëren, wordt
	de "text-shadow" property gebruikt.
	
	"0px"			Gepositioneerd vanaf left.	
	"-1px"			Gepositioneerd vanaf top.
	"1px"			Grootte van schaduw.
	"rgba(0,0,0,0.75)" 	Kleur, een transparant zwart. */
}