<h2>Click <span>here</span> before you get crazy with your keyboard.</h2>
<div class="key-wrapper">
<ul class="row">
<li class="key k81">q</li>
<li class="key k87">w</li>
<li class="key k69">e</li>
<li class="key k82">r</li>
<li class="key k84">t</li>
<li class="key k89">y</li>
<li class="key k85">u</li>
<li class="key k73">i</li>
<li class="key k79">o</li>
<li class="key k80">p</li>
</ul>
<ul class="row">
<li class="key k65">a</li>
<li class="key k83">s</li>
<li class="key k68">d</li>
<li class="key k70">f</li>
<li class="key k71">g</li>
<li class="key k72">h</li>
<li class="key k74">j</li>
<li class="key k75">k</li>
<li class="key k76">l</li>
</ul>
<ul class="row">
<li class="key k90">z</li>
<li class="key k88">x</li>
<li class="key k67">c</li>
<li class="key k86">v</li>
<li class="key k66">b</li>
<li class="key k78">n</li>
<li class="key k77">m</li>
<li class="key k188">,</li>
</ul>
<ul class="row">
<li class="key k32"></li>
</ul>
</div>
html {
background: #222;
color: #444;
font-family: 'PT Sans', sans-serif;
font-size: 15px;
-webkit-font-smoothing: antialiased;
}
h2 {
position: absolute;
margin: -200px 0 0;
top: 50%;
width: 100%;
color: #444;
text-align: center;
}
span {
padding: 0 0 2px;
border-bottom: 1px dotted #444;
cursor: pointer;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
span:hover {
color: #fd0;
}
.key-wrapper {
position: absolute;
top: 50%;
left: 50%;
margin: -90px -294px;
}
.row {text-align: center;}
.key {
margin: 3px 1px;
width: 50px;
height: 50px;
border: 2px solid #333;
border-radius: 5px;
display: inline-block;
line-height: 52px;
text-align: center;
text-transform: uppercase;
-webkit-transition: .5s;
-moz-transition: .5s;
-o-transition: .5s;
-ms-transition: .5s;
transition: .5s;
}
.k32 {
width: 346px;
}
.active {
border: 2px solid #fd0;
color: #fd0;
-webkit-transition: 0s;
-moz-transition: 0s;
-ms-transition: 0s;
transition: 0s;
}
// 1) Click anwyere in the window bellow
// 2) Start pressing those keys
$(window).keydown(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.k' + key).addClass('active');
console.log(key);
});
$(window).keyup(function(e) {
key = (e.keyCode) ? e.keyCode : e.which;
$('.key.k' + key).removeClass('active');
});
This Pen doesn't use any external CSS resources.