KOMPOOS.NL

css rounded buttons

home » css » text-effects » css-buttons.html

sitemap

voorbeeld css buttons

uitleg css buttons

Als je weinig bezoekers hebt, geeft het niet als je "zware" pagina's op jouw website hebt staan. Als jouw server miljoenen pageviews moet verwerken, wordt het opeens heel belangrijk om zo min mogelijk resources te "verspillen". Kleine knopjes, buttons en graphics zijn de "sluipmoordenaars" van de performance van jouw website (en van de gebruikers-ervaring van jouw bezoekers). Elke kleine graphic kost bij het inladen een "hele dure" httprequest. Daarom staat op deze pagina een procedure die, van zuiver CSS, knoppen maakt (dus geen enkel snelheids-verlies). Pas de opzet aan naar jouw eigen behoefte. Plaats de stylesheet in de head-sectie van jouw pagina, en de html code in de body-afdeling.

de stylesheet voor de cross browser css buttons


<style type="text/css">
	.css_button span{
		color:#ffbb00;
		background:inherit;
		position:absolute;
		font-size:1.1em;
		line-height:1em;
		margin-top:-0.49em}
	.css_button a{
		font-family:monospace;
		text-decoration:none}
	.css_button{
		width:4em;
		line-height:0px;
		float:left;
		margin-left:10px;
		background:transparent;
		position:relative}
	.css_button span:hover{
		color:#ffff00;
		background:inherit}
	.css_button span:active,.css_button span:focus{
		color:#ff8000;
		background:inherit}
	strong.rtop{border-bottom:solid #403a49 3px}
	strong.rbottom{border-top:solid #362842 4px}
	strong.rtop,strong.rbottom{display:block;background:transparent;color:inherit !important}
	strong.rtop strong,strong.rbottom strong{color:#000000;
	display:block;height:1px;overflow:hidden;background:#524856}
	strong.rbottom strong{color:#000000;background:#3F2C49}	
	strong.r1{margin:0 5px}strong.r2{margin:0 3px}strong.r3{margin:0 2px}strong.rtop strong.r4, strong.rbottom strong.r4{margin:0 1px;height:2px}
</style>

de html code voor de css rounded buttons


<div class="css_button">
	<strong class="rtop">
		<strong class="r1"></strong><strong class="r2"></strong><strong class="r3"></strong><strong class="r4"></strong>
	</strong>
	<a href="http://kompoos.nl/css/text-effects/css-buttons.html" title=" css button links "><span>&nbsp;&nbsp;&#9668;&#9668;&nbsp;&nbsp;</span></a>
	<strong class="rbottom">
		<strong class="r4"></strong><strong class="r3"></strong><strong class="r2"></strong><strong class="r1"></strong>
	</strong>		
</div>
<div class="css_button">
	<strong class="rtop">
		<strong class="r1"></strong><strong class="r2"></strong><strong class="r3"></strong><strong class="r4"></strong>
	</strong>
	<a href="http://kompoos.nl/css/text-effects/css-buttons.html" title=" css button terug "><span>&nbsp;&nbsp;&nbsp;&#9668;&nbsp;&nbsp;</span></a>
	<strong class="rbottom">
		<strong class="r4"></strong><strong class="r3"></strong><strong class="r2"></strong><strong class="r1"></strong>
	</strong>		
</div>
<div class="css_button">
	<strong class="rtop">
		<strong class="r1"></strong><strong class="r2"></strong><strong class="r3"></strong><strong class="r4"></strong>
	</strong>
	<a href="http://kompoos.nl/css/text-effects/css-buttons.html" title=" css button index "><span>&nbsp;&nbsp;&nbsp;&#9650;&nbsp;&nbsp;</span></a>
	<strong class="rbottom">
		<strong class="r4"></strong><strong class="r3"></strong><strong class="r2"></strong><strong class="r1"></strong>
	</strong>		
</div>
<div class="css_button">
	<strong class="rtop">
		<strong class="r1"></strong><strong class="r2"></strong><strong class="r3"></strong><strong class="r4"></strong>
	</strong>
	<a href="http://kompoos.nl/css/text-effects/css-buttons.html" title=" css button vooruit "><span>&nbsp;&nbsp;&nbsp;&#9658;&nbsp;&nbsp;</span></a>
	<strong class="rbottom">
		<strong class="r4"></strong><strong class="r3"></strong><strong class="r2"></strong><strong class="r1"></strong>
	</strong>		
</div>
<div class="css_button">
	<strong class="rtop">
		<strong class="r1"></strong><strong class="r2"></strong><strong class="r3"></strong><strong class="r4"></strong>
	</strong>
	<a href="http://kompoos.nl/css/text-effects/css-buttons.html" title=" css button rechts "><span>&nbsp;&nbsp;&#9658;&#9658;&nbsp;&nbsp;</span></a>
	<strong class="rbottom">
		<strong class="r4"></strong><strong class="r3"></strong><strong class="r2"></strong><strong class="r1"></strong>
	</strong>		
</div>
<div style="clear:both;"></div>