Kopie script

Select & Copy 
<a class="knop1"href="#">Voorbeeld 1</a> /* -- CSS code -- */ <style> .knop1, .knop1:link, .knop1:visited { margin: 5px 3px 5px 3px; display: inline-block; width: 100px; text-align: center; vertical-align: middle; padding: 1px 10px 2px 10px; border: 1px solid #4d4d4d; border-radius: 8px; box-shadow: #bfbaba 0px 0px 5px 1px; text-shadow: #888 0px 0px 4px; font: normal normal bold 10px verdana; margin: 8px 5px; border: 1px solid #aaa; color: #444; text-decoration: none; } .knop1:hover { background: #cdcdcd; color: #fff; background: #444; text-shadow: #eee 0px 0px 4px; } .knop1:active, .knop1:focus { background: #555; color: #ddd; } </style>
Voorbeeld 1

Select & Copy
<style> .knop2 { -moz-box-shadow:inset 0 1px 0 0 #fce2c1; -webkit-box-shadow:inset 0 1px 0 0 #fce2c1; box-shadow:inset 0 1px 0 0 #fce2c1; background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#d17504),color-stop(1,#b57528)); background:-moz-linear-gradient(center top,#d17504 5%,#b57528 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d17504',endColorstr='#b57528'); background-color:#d17504; -webkit-border-top-left-radius:6px; -moz-border-radius-topleft:6px; border-top-left-radius:6px; -webkit-border-top-right-radius:6px; -moz-border-radius-topright:6px; border-top-right-radius:6px; -webkit-border-bottom-right-radius:6px; -moz-border-radius-bottomright:6px; border-bottom-right-radius:6px; -webkit-border-bottom-left-radius:6px; -moz-border-radius-bottomleft:6px; border-bottom-left-radius:6px; text-indent:0; border:1px solid #c29951; display:inline-block; color:#fff; font-family:Trebuchet MS; font-size:14px; // height:24px; width:150px; padding:1px 2px 2px 2px; text-decoration:none; text-align:center; text-shadow:0 0 4px #8f6031 } .knop2:hover { background:-webkit-gradient(linear,left top,left bottom,color-stop(0.05,#555),color-stop(1,#222)); background:-moz-linear-gradient(center top,#222 5%,#555 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#222',endColorstr='#555'); background-color:#555; color:#fff } .knop2:active { position:relative; top:1px } .knop2 { font-size:13px; font-weight:700; margin:7px 4px 3px; width:130px } .knop2 a:hover { color:#fff; background-color:#555; border:2px solid #333 } </style>
Voorbeeld 2

Select & Copy
<a class="knop3"href="#">Voorbeeld 3</a> /* -- CSS code -- */ <style> .knop3{display:inline-block;text-align:left;width:140px;vertical-align:middle;padding:0 5px;border:0 solid #dbdbdb;border-radius:0;margin:1px 0 3px;color:#222;text-decoration:none}.knop3:hover,.knop3:focus{color:#999;text-decoration:none;font-weight:none}.knop3:before{content:"\0000a0";display:inline-block;height:24px;width:24px;line-height:24px;margin:0 4px -6px -4px;position:relative;top:0;left:0;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAADiklEQVRIibWVzU8cZRzHPyzTLRAroLtLjWxslU0KhcSkrSk9yPKmienFxHAk8TSNUS5oNfZMelCwJoZ0/gMbYsBkD15KL5iIEVlYwDTGSu26BVKYWWB3Xp7ZeTzATnhbXpr4S76HyTPz+f5ennke+J+j7KQfaJoWrKqq+igYDDbuXbNt+4/e3t47z52NpmnB0dHRb9fX16Vpmvuk67ocGRkZfK4KNE0LRiKRrzo7O/vKyspwXRcAy7LIZDIA1NfXU15ezvj4+FBPT08/QPlJ4cAu+MTExN1Hjx69n8lkvlleXq6KRqOXY7FYa1NTkz42NjYZOAlcSokQAiklUkoymQy6rg+oqppWVTWt6/pAOp1GSomiKI0AynHgHR0dfZ7nIYTYtR4I7M8vEAjgeZ7/XNLgKDhALBZjcXHxlqZpAwDhcPhWLBbDNE2klKUNdsILhQJCCH5K/cnTnM2HV5v994QQdHd330in0zdga8jFFpasoAhvb2/vE0Lgui73Jue4k3uByvpzrN7/jf6OSwA4joPjONTW1gKQy+X2t+wwuOM4fP/LLENrlVS8/BreeoEfzzTx9f0pPM8rqVwuh+u6D3cZFOHxeLzPtu1teIrBpVOcrgnjrq1Q2DCQVp6x4HkGx6f83bRT+Xyeqamp72zbvgvb/8E2fDAej39iWRZCCO5NphhKe5yufonChoEn7C3ZJriCeVuBlSe8WR/x4aZpMj09Pazr+qeqqlr+DOrq6m63tbV9bJrmVs9/nWforxzBF2sRa8sH7QOsZ0ucffW8P1DLskgmk8O6rvcX4QCKpmkBx3HeW11dRVEUNiyb2z8/pPKVKGJt5UC4Y6xx861zvHPxdTzPw7IsZmZmhg3D2AUHKE8kErKrq+sHwzCuRyKRUEXwFPmNdZL/LIHnIoW9S47+jJutDfRcuehnPjs7eyDcn0EikdjcaXKtIcqmYZB8sgyuixQOUjiIzSyfv91Mz5UmH55KpYYNw/hMVVXzoGr9w65oks1mr4fD4dC1hij53AbJx0+RBRfXzPNF56Vd8Lm5uSI8f2Av2XOa7qwkFAqFWt+IYpoWv//9L1++e5UPLjcipfTh2Wz2UDiUuA80TTtbU1PzoKWl5cLW4B3OVAQBsG2b+fn5Y8FLGuw0aW5uvqAoig9fWFg4NvxQg70mhULhxPAjDYom1dXVD4Dxk8KPHZqmHXnzlYr/AHW4dA+8jNA6AAAAAElFTkSuQmCC) no-repeat left center transparent;background-size:100% 100%} </style>

Voorbeeld 3

Select & Copy
<a class="knop4"href="#">Voorbeeld 4</a> /* -- CSS code -- */ <style> .knop4 { display: inline-block; text-align: center; vertical-align: middle; padding: 3px 12px; border: 1px solid #b3b3b3; border-radius: 7px; background: #f5f5f5; background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e0e0e0)); background: -moz-linear-gradient(top, #f5f5f5, #e0e0e0); background: linear-gradient(to bottom, #f5f5f5, #e0e0e0); text-shadow: #d9d9d9 1px 2px 2px; font: normal normal bold 14px trebuchet ms; color: #757575; text-decoration: none; } .knop4:hover, .knop4:focus { border: 1px solid #ffffff; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#555)); background: -moz-linear-gradient(top, #333, #555); background: linear-gradient(to bottom, #111, #555); color: #fff; text-decoration: none; } .knop4:active { background: #939393; background: -webkit-gradient(linear, left top, left bottom, from(#939393), to(#e0e0e0)); background: -moz-linear-gradient(top, #939393, #e0e0e0); background: linear-gradient(to bottom, #939393, #e0e0e0); } .knop4:before{ content: "\0000a0"; display: inline-block; height: 24px; width: 24px; line-height: 24px; margin: 0 4px -5px -4px; position: relative; top: 2px; left: -1px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEV0lEQVRIibWVX0hbZxjGf9/JscdEmwrSaNLadpqubopj66r2jxYGAy92YbF1UhBB2vtSvHKBId1a0A12UQYLK45CS7dW2E0HHbTDGat2LCNj7bqk1rKO/NFGM3NMc5LotwuNRI3dRbcHXnjO+Q7v+73P9z3vEYDC/4hs8qVN1pdelqt5FpU8vBh4C9iz8i4M3ANmN/l+lecWyIedqqp+WF9f39HU1GTZtWsXJpOJUCjEyMhIZmRk5Jt0Ov0B8ORF3SibREt9fX10eHhY6rouFxYWNoTH45H79++fAZo3yyPytAXQ2NLScvvy5cuFmqYxOTmJYRhrWtM0jaqqKhKJBG1tbfN3795tAPzrJVpfAKC4qqrK5/F4KsfGxvjk/EdUVzgo1LQ1BZKGwcOnQXp6XdTW1nLw4MHxaDTaBGRyC+ST6Mzg4KD0er2y5XCDnLp5Teo/3cmJ26t86uY12XK4QXq9XulyuSTw3r9KtGPHjl/Gxsbquru7efLHA8pKSxFKfqvIpSUiz6LsqX6d/v5+Ghsbb6RSqRMvkshx/Pjxp3V1dcrDgnKaT57CUQrxBPy9AFstsK0IQrOwuAj2UjApcOPzL3EmwwwNDYV9Pt9uIJXNq+RUU4BXnU6nEolE2P3GAbQCgRACIy1ACLQCweLScphMApOyzHfWHiAcDlNRUVEOWHMui5L1QbYDSywWY35+HquUaAUgpcTIAAh+vDaIkZK82drNlgKJAFJpgZSSmZmZ7E2zAM+yHaw32l/BYJCamho8V79AW3ofRRHMzkP40X0SP1wHYHj+OXvraghpEH8u8Qx9zRGnk1u3biWBWO6mc89AAVS73X7/0qVLznPnzvGarYQy23YAClSV1neaEUJw9eb3AKiqicj0DL9Pxzh79ixdXV13EonEu7k7Nq0UkSuxqOt6JJlMnlBVlYptRfz88BGOyr0cONKM+9vvGH0QYCaRZCoUIRQK80r5dnRUxsfHM36/v5vlsSFX8q76IBcK0FNSUrJ47NgxOfV4Uuq6njemHj+Wra2tsri4OA2cIg+UdTz7/FksFusLBAIIxUTKSAIgxPKtAkgZBkJRCAQC6Lp+HviKjabdYDSA5rKysk87OzvfLioqYmJigoGBAcrLbKiqCggymTThyDQ9PT00NDQwNzfHlStXfpudne0CvDkbXmM0RQhxpqOjY6Cvr0+xWq2oqsro6CgXLlxA0zRsNhsA09PTGIZBb28vhw4dIpPJMDc3h2EYXrPZ3LZv374/WTeuAdpPnz4tg8GgjEajMh6Pr45lXdel2+2W1Uc7ZfXRTul2u9eM8Hg8LqPRqAyHw7K/v38BOJmVKJtcdTgcH7tcLiwWC5qmrWqdhdVqZYt5K1sKt2K1WoFlE2bPRtM0CgsLaW9vt9jt9j7WGa3cbDZXXrx4cUXnjfD7/Tz99T4A169H8Pl8eb/LZDJYLJZKwAYEs2egAI2s/Ue/DDLAOC/wwX/G/wGzeBok5CjgIwAAAABJRU5ErkJggg==") no-repeat left center transparent; background-size: 95% 95%; } /* Override button link */ .knop4:hover,.knop4:active { border: 1px solid #999; background: #555; color: #eee; text-shadow: #333 1px 2px 2px; } .knop4 { width: 120px; padding: 0px 1px 3px 4px; margin: 5px 1px 3px 3px; text-align: left; font-family: 'Roboto', sans-serif; font-size: 13px; } </style>
Voorbeeld 4