Deze css buttons gebruiken geen externe graphics. De laad-tijd is daardoor extreem snel. Om de knoppen op jouw web-pagina te laten functioneren moet je de stylesheet in de head-sectie van jouw pagina plaatsen en de html-code in de body-sectie.
<style type="text/css">
span.button_effect{
float:left;
color:#82b282;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYlWP8//9/HAMRgIWBgeEb1RV+GTirB8iNRAMAHAgLKS+M9fUAAAAASUVORK5CYII=") top left repeat-x #003300;
display:block;
width:6em;
text-decoration:none;
font-weight:bold;
border:2px double transparent;
padding-left:1em;
margin-right:2px}
span.button_effect a{
text-decoration:none}
span.button_effect:hover{
color:#82b282;
background:#004400 url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYlWP8//9/HAMRgIWBgeEb1RV+GTirB8iNRAMAHAgLKS+M9fUAAAAASUVORK5CYII=") top left repeat-x;
border-top:2px solid #003300}
span.button_effect:active,span.button_effect:focus{
border-bottom:1px double #222222;
border-left:3px solid #005000;
border-top:3px solid #005000;
border-right:1px solid transparent;
color:#a6dda6;
background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYlWP8//9/HAMRgIWBgeEb1RV+GTirB8iNRAMAHAgLKS+M9fUAAAAASUVORK5CYII=") top left repeat-x #006600}
.clear_both{clear:both}
</style>
<div class="knoppen">
<p>
<a href="http://kompoos.nl/css/text-effects/button-effect-css.html">
<span class="button_effect">special</span></a>
<a href="http://kompoos.nl/css/text-effects/button-effect-css.html">
<span class="button_effect">button</span></a>
<a href="http://kompoos.nl/css/text-effects/button-effect-css.html">
<span class="button_effect">effect</span></a>
</p>
<p class="clear_both" ></p>
</div>