Simpele CSS3 button met 3D effect

CSS3 bied een heleboel nieuwe gereedschap voor het stylen van een webpagina. CSS3 geeft vooral veel mogelijkheden voor het geven van een 3d look aan je webpagina. Dit maakt CSS3 heel erg geschikt voor gebruik in buttons.

Voor maximale herkenbaarheid moeten buttons net zoals echte knoppen een beetje naar buiten steken. CSS3 geeft ons de mogelijkheid om een illusie van 3D te creëren zonder gebruik te maken van afbeeldingen.

CSS3 effecten die we gaan gebruiken zijn:

• box-shadow
• gradient

Eerst maken we een normale knop:

Code blok

<button class="knop">Button</button>

We geven hem de volgende stijl mee:

Code blok

.knop{
	border: 1px solid #DA7C0C;
	background-color: #f78d1d;
	color: #fef4e9;
	padding: 6px 16px;
	font-size: 13px;
	font-weight:700;
	cursor: pointer;
}

Deze knop ziet er dan als volgt uit:

Button

Doordat ik gebruik maak van cursor: pointer; verandert de muis in een handje wanneer hij over de beweegt. Dit geeft een gebruiker de hint dat hier sprake is van een knop die ingedrukt kan worden. In een goed ontwerp zal dit effect overal aanwezig moeten zijn waarbij er interactie is tussen de gebruiker en de website.

Als eerste geven we de knop een schaduw effect mee:

Code blok

.knop{
	-webkit-box-shadow: #AAA 1px 1px 4px; /*CSS voor webkit browser*/
	-moz-box-shadow: #AAA 1px 1px 4px; /* CSS voor firefox*/
	box-shadow: #AAA 1px 1px 4px; /* officiële CSS voor Opera*/
}

box-shadow creëert een schaduw rondom het gehele object. Eerst geven we een kleur op. #AAA is een lichte kleur grijs zoals een echte schaduw eruit ziet. Met 1px 1px geven we aan dat de schaduw 1px naar onder en 1px naar rechts opschuift. Met 4px wordt aangegeven hoe groot de schaduw word.

Dit geeft een subtiel schaduw effect waardoor het lijkt alsof de knop uit de pagina gelift word:

Button

De volgende stap is het toevoegen van een gradient. Een gradient is een geleidelijk overgang tussen 2 verschillende kleuren.

Voor een 3d effect zijn minimaal 2 gradienten nodig. De eerste moet van boven naar beneden, van licht naar donker lopen. Dit vormt de basis van de knop.

De tweede gradient loopt van boven naar beneden, van donker naar licht. Deze wordt gebruikt wanneer de knop word ingedrukt. Hiervoor maken we gebruik van :active.

Tenslotte kunnen we nog met :hover een gradient toevoegen voor wanneer iemand met de muis over de knop heen beweegt.

We voegen de volgende code voor de gradient toe:

Code blok

.knop{
background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
}
 
.knop:hover{
background: #f47c20;
background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
background: -moz-linear-gradient(top,  #f88e11,  #f06015);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}
 
.knop:active {
color: #fcd3a5;
background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
}

Opmerking: Hier maken we gebruik van filter:. Filter is specifieke code voor Internet Explorer en is geen CSS3. Filter is bruikbaar vanaf Internet Explorer 5.5.

In -webkit-gradient voor webkit browsers, geven we eerst aan van waar tot waar de gradiënt moet lopen. Daarna geven we aan tussen welke 2 kleuren een gradiënt moet gaan lopen.

In -moz-linear-gradient voor Firefox, geven we eerst aan waar de gradiënt moet starten. Optioneel kunnen we een hoek opgeven waarin wordt aangegeven onder welke hoek de gradiënt moet lopen vb. 90deg. Tenslotte geven we de 2 kleuren op waartussen de gradiënt moet lopen.

Er is geen gradiënt ondersteuning voor Opera.

Met: position:relative en top:1px is het mogelijk om nog een extra illusie van indrukken te creëren. De knop beweegt hierdoor iets naar beneden wanneer je hem indrukt.

De uiteindelijk knop zonder :hover en :active effecten ziet er als volgt uit:

Button

De volledige code:

Code blok

<html>
<head>
	<style type="text/css">
	.knop{
		border: 1px solid #DA7C0C;
		background-color: #f78d1d;
		color: #fef4e9;
		padding: 6 16;
		font-size: 13px;
		font-weight:700;
		cursor: pointer;
		-webkit-box-shadow: #AAA 1px 1px 4px;
		-moz-box-shadow: #AAA 1px 1px 4px;
		box-shadow: #AAA 1px 1px 4px;
		background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
		background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
	}
 
	.knop:hover{
		background: #f47c20;
		background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
		background: -moz-linear-gradient(top,  #f88e11,  #f06015);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
	}
 
	.knop:active {
		position: relative;
		top: 1px;
		color: #fcd3a5;
		background: -webkit-gradient(linear, left top, left bottom, from(#F47A20), to(#FAA51A));
		background: -moz-linear-gradient(top,  #f47a20,  #faa51a);
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f47a20', endColorstr='#faa51a');
	}
	</style>
</head>
<body>
	<button class="knop">Button</button>
</body>
</html>