KOMPOOS.NL

buttons - CSS

home » css » text-effects » buttons.html

sitemap

voorbeeld cross browser css buttons

uitleg css buttons procedure

Plaats de stylesheet in de head-sectie van jouw pagina, en de html-code (ergens) in de body-sectie. Het allereerste statement in de style sheet (margin-left:50px) kan je weghalen (of naar jouw eigen wens aanpassen); het heeft verder geen invloed op het functioneren van het geheel. Pas naar jouw eigen smaak de kleuren en de afmetingen van de buttons aan. Ook de skew is eenvoudig te veranderen (bij de "transform" en het IE-filter). De procedure is cross browser.

stylesheet buttons


<style type="text/css">
	.buttons{
		margin-left:50px;}
	.button_border_in{
		position:absolute;
		width:100px;
		height:20px;
		border-top:1px solid #fd6;
		border-right:1px solid #970;
		border-bottom:1px solid #970;
		border-left:1px solid #fd5;overflow:hidden;
		text-align:center}
	.button_border_uit{position:absolute;
		top:0; left:0;
		width:98px;
		height:18px;
		color:#fff;
		font-size:11px;
		font-weight:bold;
		overflow:hidden;
		border-top:1px solid #c00;
		border-right:1px solid #a55;
		border-bottom:1px solid #500;
		border-left:1px solid #a55;
		overflow:hidden;
		text-align:center;
		line-height:15px;
		background:#700}
	.button_uit{
		position:relative;
		top:0;
		left:0;
		width:102px;
		height:22px;
		border:1px solid #000}
	.eerste{
		position:relative;
		top:0;
		left:0;
		width:105px;
		height:25px;
		border-top:1px solid #ddd;
		border-left:1px solid #ddd;
		background:#f7f6ef}
	.tweede{
		position:relative;
		top:0;
		left:0;
		width:107px;
		height:27px;
		border-top:1px solid #bbb;
		border-left:1px solid #bbb;
		 background:#f7f6ef}
	.derde{
		position:relative;
		top:0;
		left:0;
		width:109px;
		height:29px;
		border-top:1px solid #9c9b95;
		border-left:1px solid #9c9b95;
		background:#f7f6ef}
	.vierde{
		position:relative;
		top:0;
		left:0;
		width:111px;
		height:31px;
		border-top:1px solid #d5d3ca;
		border-left:1px solid #d5dc3a;
		background:#fff;
		 margin-top:2px}
	.buttons a.knop{
		color:#c00;
		text-decoration:none;
		position:absolute}
	.buttons a.knop:hover{
		cursor:pointer}
	.buttons a.knop:hover .button_border_in{
		position:absolute;
		width:100px;
		height:20px;
		color:#f00;
		background:#fff;
		border-bottom:1px solid #444;
		border-left:1px solid #500;
		border-top:1px solid #500;
		border-right:1px solid #444;
		overflow:hidden;
		text-align:center}
	.buttons a.knop:hover .button_border_uit{
		position:absolute;
		top:0;
		left:0;
		width:98px;
		height:18px;
		color:#fff;
		font-size:11px;
		font-weight:bold;
		overflow:hidden;
		border-bottom:1px solid #800;
		border-left:1px solid #caa205;
		border-top:1px solid #c9a105;
		border-right:1px solid #ffd42e;
		overflow:hidden;
		text-align:center;
		line-height:17px;
		background:#700}
	.buttons{
		display:block;
		-moz-transform: matrix(1, 0, 0.1, 1, 0, 0);
		-webkit-transform: matrix(1, 0, 0.1, 1,  0, 0);
		-o-transform: matrix(1, 0, 0.1, 1,  0, 0);
		position:relative;
		background:#444;
		width:112px;
		padding:10px;
		border-left:6px inset #aaa;
		border-bottom:6px outset #777;
		filter:progid:DXImageTransform.Microsoft.Matrix(M11="1",M12="0.08",M21="0.08",M22="1",sizingMethod='auto expand');}
</style>

html code css buttons


<div class="buttons">
	<div class="vierde">
		<div class="derde">
			<div class="tweede">
				<div class="eerste">
					<div class="button_uit">
						<a class="knop" href="http://kompoos.nl/css/text-effects/buttons.html"><span class="button_border_in">
						<span class="button_border_uit">css buttons</span></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="vierde">
		<div class="derde">
			<div class="tweede">
				<div class="eerste">
					<div class="button_uit">
						<a class="knop" href="http://kompoos.nl/css/text-effects/buttons.html"><span class="button_border_in">
						<span class="button_border_uit">cross browser</span></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="vierde">
		<div class="derde">
			<div class="tweede">
				<div class="eerste">
					<div class="button_uit">
						<a class="knop" href="http://kompoos.nl/css/text-effects/buttons.html"><span class="button_border_in">
						<span class="button_border_uit">valide code</span></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="vierde">
		<div class="derde">
			<div class="tweede">
				<div class="eerste">
					<div class="button_uit">
						<a class="knop" href="http://kompoos.nl/css/text-effects/buttons.html"><span class="button_border_in">
						<span class="button_border_uit">razend snel</span></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="vierde">
		<div class="derde">
			<div class="tweede">
				<div class="eerste">
					<div class="button_uit">
						<a class="knop" href="http://kompoos.nl/css/text-effects/buttons.html"><span class="button_border_in">
						<span class="button_border_uit">foutloze css</span></span></a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>