Miniclip Keyboard icons in css

by Ben Gillbanks

HTML

<h1>Keyboard Keys in CSS</h1>

<div class="keys">
    <div class="key"><span>&rarr;</span></div>
    <div class="key"><span>&larr;</span></div>
    <div class="key"><span>&uarr;</span></div>
    <div class="key"><span>&darr;</span></div>
    <div class="key"><span>A</span></div>
    <div class="key"><span>B</span></div>
    <div class="key"><span>C</span></div>
    <div class="key"><span>D</span></div>
    <div class="key"><span>E</span></div>
    <div class="key"><span>F</span></div>
    <div class="key"><span>G</span></div>
    <div class="key"><span>H</span></div>
    <div class="key"><span>I</span></div>
    <div class="key"><span>J</span></div>
    <div class="key"><span>K</span></div>
    <div class="key"><span>L</span></div>
    <div class="key"><span>M</span></div>
    <div class="key"><span>N</span></div>
    <div class="key"><span>O</span></div>
    <div class="key"><span>P</span></div>
    <div class="key"><span>Q</span></div>
    <div class="key"><span>R</span></div>
    <div class="key"><span>S</span></div>
    <div class="key"><span>T</span></div>
    <div class="key"><span>U</span></div>
    <div class="key"><span>V</span></div>
    <div class="key"><span>W</span></div>
    <div class="key"><span>X</span></div>
    <div class="key"><span>Y</span></div>
    <div class="key"><span>Z</span></div>
    <div class="key wide"><span>SPACE</span></div>
    <div class="key"><span>[</span></div>
    <div class="key"><span>]</span></div>
    <div class="key"><span>(</span></div>
    <div class="key"><span>)</span></div>
    <div class="key"><span>{</span></div>
    <div class="key"><span>}</span></div>
    <div class="key"><span>\</span></div>
    <div class="key"><span>~</span></div>
    <div class="key"><span>"</span></div>
    <div class="key"><span>'</span></div>
    <div class="key"><span>></span></div>
    <div class="key"><span><</span></div>
    <div class="key"><span>:</span></div>
    <div class="key"><span>;</span></div>
    <div class="key...

CSS

body {
    font-family:Tahoma, sans-serif;
}

h1 {
    text-align:center;
}
.keys {
    text-align:center;
}
.key {
    border-style:solid;
    border-color:#D5D6AD #C1C1A8 #CDCBA5 #E7E5C5;
    border-width:2px 3px 5px 3px;
    background:#D6D4B4;
    display:inline-block;
    border-radius:5px;
    margin:8px;
}

.key span {
    background:#ECEECA;
    color:#5D5E4F;
    display:block;
    font-size:10px;
    padding:0 2px;
    border-radius:3px;
    width:24px;
    height:28px;
    line-height:28px;
    text-align:center;
    font-weight:bold;
    letter-spacing:1px;
    text-transform:uppercase;
}
.key.wide span {
    width:auto;
    padding: 0 5px;
}