Pure CSS Hacking Keyboard

Interactive Hacking keyboard made using Pure CSS. It has a smooth click effect and it is interactive, meaning whatever you type on your physical keyboard shows up on this keyboard.

Made by Peiwen Lu.

Related Posts

The Html Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>Pure CSS Hacking Keyboard</title> 
</head>
<body>
  <div id="keyboard">
  <div id="main">
    <div class="k27 f_key">
      <div class="keycap">Esc<span class="side">Power</span></div>
    </div>
    <div class="k49 key">
      <div class="keycap">!<br/>1<span class="side">F1</span></div>
    </div>
    <div class="k50 key">
      <div class="keycap">@<br/>2<span class="side">F2</span></div>
    </div>
    <div class="k51 key">
      <div class="keycap">#<br/>3<span class="side">F3</span></div>
    </div>
    <div class="k52 key">
      <div class="keycap">$<br/>4<span class="side">F4</span></div>
    </div>
    <div class="k53 key">
      <div class="keycap">%<br/>5<span class="side">F5</span></div>
    </div>
    <div class="k54 key">
      <div class="keycap">^<br/>6<span class="side">F6</span></div>
    </div>
    <div class="k55 key">
      <div class="keycap">&<br/>7<span class="side">F7</span></div>
    </div>
    <div class="k56 key">
      <div class="keycap">*<br/>8<span class="side">F8</span></div>
    </div>
    <div class="k57 key">
      <div class="keycap">(<br/>9<span class="side">F9</span></div>
    </div>
    <div class="k48 key">
      <div class="keycap">)<br/>0<span class="side">F10</span></div>
    </div>
    <div class="k189 key">
      <div class="keycap">_<br/>-<span class="side">F11</span></div>
    </div>
    <div class="k187 key">
      <div class="keycap">+<br/>=<span class="side">F12</span></div>
    </div>
    <div class="k220 key">
      <div class="keycap">|<br/>\<span class="side">Ins</span></div>
    </div>
    <div class="k192 key">
      <div class="keycap">~<br/>`<span class="side">Del</span></div>
    </div>
    <div class="k9 f_key">
      <div class="keycap">Tab<span class="side">Caps</span></div>
    </div>
    <div class="k81 key">
      <div class="keycap">Q</div>
    </div>
    <div class="k87 key">
      <div class="keycap">W</div>
    </div>
    <div class="k69 key">
      <div class="keycap">E</div>
    </div>
    <div class="k82 key">
      <div class="keycap">R</div>
    </div>
    <div class="k84 key">
      <div class="keycap">T</div>
    </div>
    <div class="k89 key">
      <div class="keycap">Y</div>
    </div>
    <div class="k85 key">
      <div class="keycap">U</div>
    </div>
    <div class="k73 key">
      <div class="keycap">I<span class="side">PSc/SRq</span></div>
    </div>
    <div class="k79 key">
      <div class="keycap">O<span class="side">ScrLk</span></div>
    </div>
    <div class="k80 key">
      <div class="keycap">P<span class="side">Pus/Brk</span></div>
    </div>
    <div class="k219 key">
      <div class="keycap">{<br/>[<span class="side">โ†‘</span></div>
    </div>
    <div class="k221 key">
      <div class="keycap">}<br/>]</div>
    </div>
    <div class="k8 f_key">
      <div class="keycap">Delete<span class="side">BS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>Clear</em></span></div>
    </div>
    <div class="k17 f_key">
      <div class="keycap">Control</div>
    </div>
    <div class="k65 key">
      <div class="keycap">A<span class="side">Vol_Dn</span></div>
    </div>
    <div class="k83 key">
      <div class="keycap">S<span class="side">Vol_Up</span></div>
    </div>
    <div class="k68 key">
      <div class="keycap">D<span class="side">Mute</span></div>
    </div>
    <div class="k70 key">
      <div class="keycap">F<span class="side">Eject</span></div>
    </div>
    <div class="k71 key">
      <div class="keycap">G</div>
    </div>
    <div class="k72 key">
      <div class="keycap">H<span class="side">*</span></div>
    </div>
    <div class="k74 key">
      <div class="keycap">J<span class="side">/</span></div>
    </div>
    <div class="k75 key">
      <div class="keycap">K<span class="side">Home</span></div>
    </div>
    <div class="k76 key">
      <div class="keycap">L<span class="side">PageUp</span></div>
    </div>
    <div class="k186 key">
      <div class="keycap">:<br/>;<span class="side">โ†</span></div>
    </div>
    <div class="k222 key">
      <div class="keycap">"<br/>'<span class="side">โ†’</span></div>
    </div>
    <div class="k13 f_key">
      <div class="keycap">Return<span class="side"><em>Enter</em></span></div>
    </div>
    <div class="k16 left f_key">
      <div class="keycap">Shift</div>
    </div>
    <div class="k90 key">
      <div class="keycap">Z</div>
    </div>
    <div class="k88 key">
      <div class="keycap">X</div>
    </div>
    <div class="k67 key">
      <div class="keycap">C</div>
    </div>
    <div class="k86 key">
      <div class="keycap">V</div>
    </div>
    <div class="k66 key">
      <div class="keycap">B</div>
    </div>
    <div class="k78 key">
      <div class="keycap">N<span class="side">+</span></div>
    </div>
    <div class="k77 key">
      <div class="keycap">M<span class="side">-</span></div>
    </div>
    <div class="k188 key">
      <div class="keycap"><<br/>,<span class="side">End</span></div>
    </div>
    <div class="k190 key">
      <div class="keycap">><br/>.<span class="side">PageDn</span></div>
    </div>
    <div class="k191 key">
      <div class="keycap">?<br/>/<span class="side">โ†“</span></div>
    </div>
    <div class="k16 right f_key">
      <div class="keycap">Shift</div>
    </div>
    <div class="fn f_key">
      <div class="keycap">Fn</div>
    </div>
  </div>
  <div id="addition_wrap">
    <div id="addition">
      <div class="k18 left f_key">
        <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
      </div>
      <div class="k224 k91 left f_key">
        <div class="keycap"><span class="top">โŒ˜</span><span class="bottom">โ—‡</span></div>
      </div>
      <div class="k32 key">
        <div class="keycap"></div>
      </div>
      <div class="k224 k93 right f_key">
        <div class="keycap"><span class="top">โŒ˜</span><span class="bottom">โ—‡</span><span class="side">Stop</span></div>
      </div>
      <div class="k18 right f_key">
        <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
      </div>
    </div>
  </div>
</div>

<p id="update"><a href="https://codepen.io/dehash">@dehash</a> added a typing effect to this pen. Very cool! Please check: <a href=" https://codepen.io/dehash/pen/nEJyf">https://codepen.io/dehash/pen/nEJyf</a></p>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

The CSS Code

@import url(https://fonts.googleapis.com/css?family=Average+Sans);
#update {
  margin-top: 60px;
  text-align: center;
}

/* -------------------------------------
 * style
 * ------------------------------------- */
body {
  width: 890px;
  margin: 0 auto;
  padding: 100px 30px 30px;
  font-family: "Average Sans", sans-serif;
  color: #555;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  background: #C7DBE5;
}

/*------- Keyboard ------- */
#keyboard {
  padding: 30px 8px 13px;
  background: #f5f3f1;
  background: -webkit-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -moz-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -ms-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -o-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: linear-gradient(to bottom, #e5e2e1, #f5f3f1, #e5e2e1);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  -o-transform: rotateX(15deg);
}

#main {
  padding: 2px;
  background: #4d4d4d;
  border-radius: 4px;
  overflow: hidden;
}

#addition_wrap {
  width: 650px;
  margin: -2px 0 0 85px;
  padding: 0 2px 2px;
  background: #4d4d4d;
  border-radius: 0 0 4px 4px;
  position: relative;
}
#addition_wrap:before, #addition_wrap:after {
  content: "";
  width: 5px;
  height: 5px;
  background: #ebe8e7;
  border-top: 2px solid #4d4d4d;
  position: absolute;
  top: 0px;
}
#addition_wrap:before {
  left: -5px;
  border-right: 2px solid #4d4d4d;
  border-radius: 0 5px 0 0;
}
#addition_wrap:after {
  right: -5px;
  border-left: 2px solid #4d4d4d;
  border-radius: 5px 0 0 0;
}

#addition {
  overflow: hidden;
}

.key, .f_key {
  width: 40px;
  height: 45px;
  margin: 2px;
  border-width: 3px 7px 10px;
  border-style: solid;
  border-radius: 4px;
  float: left;
}
.key.pressed, .f_key.pressed {
  -webkit-transform: scale(0.95, 0.95);
  -moz-transform: scale(0.95, 0.95);
  -ms-transform: scale(0.95, 0.95);
  -o-transform: scale(0.95, 0.95);
  transform: scale(0.95, 0.95);
}

.key {
  background: #d3cfcc;
  border-color: #ece8e4 #dedad6 #c9c4c4;
}

.f_key {
  background: #a8aeb8;
  border-color: #c4c7cc #adb9cc #96a6bd;
}

.key .keycap {
  width: 33px;
  height: 40px;
  padding: 5px 0 0 7px;
  font-size: 18px;
  line-height: 1;
  background: #f5f3f1;
  background: -webkit-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -moz-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -ms-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -o-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: linear-gradient(to right, #e5e2e1, #f5f3f1, #e5e2e1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: relative;
}

.f_key .keycap {
  width: inherit;
  height: inherit;
  font-size: 15px;
  line-height: 45px;
  text-indent: 7px;
  background: #cdd3de;
  background: -webkit-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -moz-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -ms-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -o-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: linear-gradient(to right, #bbc3d2, #cdd3de, #bbc3d2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
}

.top {
  padding: 3px 5px 0 0;
  font-size: 12px;
  font-style: italic;
  text-align: right;
  line-height: 1;
  display: block;
}

.bottom {
  width: inherit;
  line-height: 20px;
  display: block;
}

.side {
  font-size: 10px;
  line-height: 1;
  display: block;
  position: absolute;
  left: 4px;
  bottom: -10px;
  -webkit-transform: rotateX(50deg);
  -moz-transform: rotateX(50deg);
  -ms-transform: rotateX(50deg);
  -o-transform: rotateX(50deg);
  transform: rotateX(50deg);
}

.f_key .side {
  left: -3px;
}

.k13 .side {
  right: 7px;
  text-align: right;
}

/*------- key width ------- */
.k27, .k18.left {
  width: 38px;
  border-right-width: 9px;
}

.k192, .fn, .k18.right {
  width: 38px;
  border-left-width: 9px;
}

.k192 .keycap {
  width: 30px;
}

.k9 {
  width: 66px;
  border-right-width: 10px;
}

.k8 {
  width: 66px;
  border-left-width: 10px;
}

.k17 {
  width: 87px;
  border-right-width: 10px;
}

.k13 {
  width: 103px;
  border-left-width: 10px;
}

.k16.left {
  width: 113px;
  border-right-width: 10px;
}

.k16.right {
  width: 77px;
  border-left-width: 10px;
}

.k91, .k93 {
  width: 72px;
}
.k91 .top, .k93 .top {
  font-size: 13px;
}
.k91 .bottom, .k93 .bottom {
  font-size: 20px;
}

.k91.left {
  border-right-width: 10px;
}

.k93.right {
  border-left-width: 10px;
}

.k32 {
  width: 328px;
  border-width: 3px 8px 10px;
}
.k32 .keycap {
  width: 321px;
}
.k32.pressed {
  -webkit-transform: scale(0.98, 0.95);
  -moz-transform: scale(0.98, 0.95);
  -ms-transform: scale(0.98, 0.95);
  -o-transform: scale(0.98, 0.95);
  transform: scale(0.98, 0.95);
}

The JavaScript Code

// Bind keyup event, thanks @vendruscolo
$(window).on({
  'keydown': function (e) {
    var pressedKey = $('.k' + e.keyCode);
    pressedKey.addClass('pressed');
  },
  'keyup': function (e) {
    var pressedKey = $('.k' + e.keyCode);
    pressedKey.removeClass('pressed');
  } });

The Full Code

<!DOCTYPE html>
<html lang="en" >
<head>
  <title>Pure CSS Hacking Keyboard</title> 
<style>
@import url(https://fonts.googleapis.com/css?family=Average+Sans);
#update {
  margin-top: 60px;
  text-align: center;
}

/* -------------------------------------
 * style
 * ------------------------------------- */
body {
  width: 890px;
  margin: 0 auto;
  padding: 100px 30px 30px;
  font-family: "Average Sans", sans-serif;
  color: #555;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
  background: #C7DBE5;
}

/*------- Keyboard ------- */
#keyboard {
  padding: 30px 8px 13px;
  background: #f5f3f1;
  background: -webkit-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -moz-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -ms-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -o-linear-gradient(top, #e5e2e1, #f5f3f1, #e5e2e1);
  background: linear-gradient(to bottom, #e5e2e1, #f5f3f1, #e5e2e1);
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-transform: rotateX(15deg);
  -ms-transform: rotateX(15deg);
  -o-transform: rotateX(15deg);
}

#main {
  padding: 2px;
  background: #4d4d4d;
  border-radius: 4px;
  overflow: hidden;
}

#addition_wrap {
  width: 650px;
  margin: -2px 0 0 85px;
  padding: 0 2px 2px;
  background: #4d4d4d;
  border-radius: 0 0 4px 4px;
  position: relative;
}
#addition_wrap:before, #addition_wrap:after {
  content: "";
  width: 5px;
  height: 5px;
  background: #ebe8e7;
  border-top: 2px solid #4d4d4d;
  position: absolute;
  top: 0px;
}
#addition_wrap:before {
  left: -5px;
  border-right: 2px solid #4d4d4d;
  border-radius: 0 5px 0 0;
}
#addition_wrap:after {
  right: -5px;
  border-left: 2px solid #4d4d4d;
  border-radius: 5px 0 0 0;
}

#addition {
  overflow: hidden;
}

.key, .f_key {
  width: 40px;
  height: 45px;
  margin: 2px;
  border-width: 3px 7px 10px;
  border-style: solid;
  border-radius: 4px;
  float: left;
}
.key.pressed, .f_key.pressed {
  -webkit-transform: scale(0.95, 0.95);
  -moz-transform: scale(0.95, 0.95);
  -ms-transform: scale(0.95, 0.95);
  -o-transform: scale(0.95, 0.95);
  transform: scale(0.95, 0.95);
}

.key {
  background: #d3cfcc;
  border-color: #ece8e4 #dedad6 #c9c4c4;
}

.f_key {
  background: #a8aeb8;
  border-color: #c4c7cc #adb9cc #96a6bd;
}

.key .keycap {
  width: 33px;
  height: 40px;
  padding: 5px 0 0 7px;
  font-size: 18px;
  line-height: 1;
  background: #f5f3f1;
  background: -webkit-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -moz-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -ms-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: -o-linear-gradient(left, #e5e2e1, #f5f3f1, #e5e2e1);
  background: linear-gradient(to right, #e5e2e1, #f5f3f1, #e5e2e1);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  position: relative;
}

.f_key .keycap {
  width: inherit;
  height: inherit;
  font-size: 15px;
  line-height: 45px;
  text-indent: 7px;
  background: #cdd3de;
  background: -webkit-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -moz-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -ms-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: -o-linear-gradient(left, #bbc3d2, #cdd3de, #bbc3d2);
  background: linear-gradient(to right, #bbc3d2, #cdd3de, #bbc3d2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  position: relative;
}

.top {
  padding: 3px 5px 0 0;
  font-size: 12px;
  font-style: italic;
  text-align: right;
  line-height: 1;
  display: block;
}

.bottom {
  width: inherit;
  line-height: 20px;
  display: block;
}

.side {
  font-size: 10px;
  line-height: 1;
  display: block;
  position: absolute;
  left: 4px;
  bottom: -10px;
  -webkit-transform: rotateX(50deg);
  -moz-transform: rotateX(50deg);
  -ms-transform: rotateX(50deg);
  -o-transform: rotateX(50deg);
  transform: rotateX(50deg);
}

.f_key .side {
  left: -3px;
}

.k13 .side {
  right: 7px;
  text-align: right;
}

/*------- key width ------- */
.k27, .k18.left {
  width: 38px;
  border-right-width: 9px;
}

.k192, .fn, .k18.right {
  width: 38px;
  border-left-width: 9px;
}

.k192 .keycap {
  width: 30px;
}

.k9 {
  width: 66px;
  border-right-width: 10px;
}

.k8 {
  width: 66px;
  border-left-width: 10px;
}

.k17 {
  width: 87px;
  border-right-width: 10px;
}

.k13 {
  width: 103px;
  border-left-width: 10px;
}

.k16.left {
  width: 113px;
  border-right-width: 10px;
}

.k16.right {
  width: 77px;
  border-left-width: 10px;
}

.k91, .k93 {
  width: 72px;
}
.k91 .top, .k93 .top {
  font-size: 13px;
}
.k91 .bottom, .k93 .bottom {
  font-size: 20px;
}

.k91.left {
  border-right-width: 10px;
}

.k93.right {
  border-left-width: 10px;
}

.k32 {
  width: 328px;
  border-width: 3px 8px 10px;
}
.k32 .keycap {
  width: 321px;
}
.k32.pressed {
  -webkit-transform: scale(0.98, 0.95);
  -moz-transform: scale(0.98, 0.95);
  -ms-transform: scale(0.98, 0.95);
  -o-transform: scale(0.98, 0.95);
  transform: scale(0.98, 0.95);
}
</style>
</head>
<body>
  <div id="keyboard">
  <div id="main">
    <div class="k27 f_key">
      <div class="keycap">Esc<span class="side">Power</span></div>
    </div>
    <div class="k49 key">
      <div class="keycap">!<br/>1<span class="side">F1</span></div>
    </div>
    <div class="k50 key">
      <div class="keycap">@<br/>2<span class="side">F2</span></div>
    </div>
    <div class="k51 key">
      <div class="keycap">#<br/>3<span class="side">F3</span></div>
    </div>
    <div class="k52 key">
      <div class="keycap">$<br/>4<span class="side">F4</span></div>
    </div>
    <div class="k53 key">
      <div class="keycap">%<br/>5<span class="side">F5</span></div>
    </div>
    <div class="k54 key">
      <div class="keycap">^<br/>6<span class="side">F6</span></div>
    </div>
    <div class="k55 key">
      <div class="keycap">&<br/>7<span class="side">F7</span></div>
    </div>
    <div class="k56 key">
      <div class="keycap">*<br/>8<span class="side">F8</span></div>
    </div>
    <div class="k57 key">
      <div class="keycap">(<br/>9<span class="side">F9</span></div>
    </div>
    <div class="k48 key">
      <div class="keycap">)<br/>0<span class="side">F10</span></div>
    </div>
    <div class="k189 key">
      <div class="keycap">_<br/>-<span class="side">F11</span></div>
    </div>
    <div class="k187 key">
      <div class="keycap">+<br/>=<span class="side">F12</span></div>
    </div>
    <div class="k220 key">
      <div class="keycap">|<br/>\<span class="side">Ins</span></div>
    </div>
    <div class="k192 key">
      <div class="keycap">~<br/>`<span class="side">Del</span></div>
    </div>
    <div class="k9 f_key">
      <div class="keycap">Tab<span class="side">Caps</span></div>
    </div>
    <div class="k81 key">
      <div class="keycap">Q</div>
    </div>
    <div class="k87 key">
      <div class="keycap">W</div>
    </div>
    <div class="k69 key">
      <div class="keycap">E</div>
    </div>
    <div class="k82 key">
      <div class="keycap">R</div>
    </div>
    <div class="k84 key">
      <div class="keycap">T</div>
    </div>
    <div class="k89 key">
      <div class="keycap">Y</div>
    </div>
    <div class="k85 key">
      <div class="keycap">U</div>
    </div>
    <div class="k73 key">
      <div class="keycap">I<span class="side">PSc/SRq</span></div>
    </div>
    <div class="k79 key">
      <div class="keycap">O<span class="side">ScrLk</span></div>
    </div>
    <div class="k80 key">
      <div class="keycap">P<span class="side">Pus/Brk</span></div>
    </div>
    <div class="k219 key">
      <div class="keycap">{<br/>[<span class="side">โ†‘</span></div>
    </div>
    <div class="k221 key">
      <div class="keycap">}<br/>]</div>
    </div>
    <div class="k8 f_key">
      <div class="keycap">Delete<span class="side">BS &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<em>Clear</em></span></div>
    </div>
    <div class="k17 f_key">
      <div class="keycap">Control</div>
    </div>
    <div class="k65 key">
      <div class="keycap">A<span class="side">Vol_Dn</span></div>
    </div>
    <div class="k83 key">
      <div class="keycap">S<span class="side">Vol_Up</span></div>
    </div>
    <div class="k68 key">
      <div class="keycap">D<span class="side">Mute</span></div>
    </div>
    <div class="k70 key">
      <div class="keycap">F<span class="side">Eject</span></div>
    </div>
    <div class="k71 key">
      <div class="keycap">G</div>
    </div>
    <div class="k72 key">
      <div class="keycap">H<span class="side">*</span></div>
    </div>
    <div class="k74 key">
      <div class="keycap">J<span class="side">/</span></div>
    </div>
    <div class="k75 key">
      <div class="keycap">K<span class="side">Home</span></div>
    </div>
    <div class="k76 key">
      <div class="keycap">L<span class="side">PageUp</span></div>
    </div>
    <div class="k186 key">
      <div class="keycap">:<br/>;<span class="side">โ†</span></div>
    </div>
    <div class="k222 key">
      <div class="keycap">"<br/>'<span class="side">โ†’</span></div>
    </div>
    <div class="k13 f_key">
      <div class="keycap">Return<span class="side"><em>Enter</em></span></div>
    </div>
    <div class="k16 left f_key">
      <div class="keycap">Shift</div>
    </div>
    <div class="k90 key">
      <div class="keycap">Z</div>
    </div>
    <div class="k88 key">
      <div class="keycap">X</div>
    </div>
    <div class="k67 key">
      <div class="keycap">C</div>
    </div>
    <div class="k86 key">
      <div class="keycap">V</div>
    </div>
    <div class="k66 key">
      <div class="keycap">B</div>
    </div>
    <div class="k78 key">
      <div class="keycap">N<span class="side">+</span></div>
    </div>
    <div class="k77 key">
      <div class="keycap">M<span class="side">-</span></div>
    </div>
    <div class="k188 key">
      <div class="keycap"><<br/>,<span class="side">End</span></div>
    </div>
    <div class="k190 key">
      <div class="keycap">><br/>.<span class="side">PageDn</span></div>
    </div>
    <div class="k191 key">
      <div class="keycap">?<br/>/<span class="side">โ†“</span></div>
    </div>
    <div class="k16 right f_key">
      <div class="keycap">Shift</div>
    </div>
    <div class="fn f_key">
      <div class="keycap">Fn</div>
    </div>
  </div>
  <div id="addition_wrap">
    <div id="addition">
      <div class="k18 left f_key">
        <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
      </div>
      <div class="k224 k91 left f_key">
        <div class="keycap"><span class="top">โŒ˜</span><span class="bottom">โ—‡</span></div>
      </div>
      <div class="k32 key">
        <div class="keycap"></div>
      </div>
      <div class="k224 k93 right f_key">
        <div class="keycap"><span class="top">โŒ˜</span><span class="bottom">โ—‡</span><span class="side">Stop</span></div>
      </div>
      <div class="k18 right f_key">
        <div class="keycap"><span class="top">Opt</span><span class="bottom">Alt</span></div>
      </div>
    </div>
  </div>
</div>

<p id="update"><a href="https://codepen.io/dehash">@dehash</a> added a typing effect to this pen. Very cool! Please check: <a href=" https://codepen.io/dehash/pen/nEJyf">https://codepen.io/dehash/pen/nEJyf</a></p>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Bind keyup event, thanks @vendruscolo
$(window).on({
  'keydown': function (e) {
    var pressedKey = $('.k' + e.keyCode);
    pressedKey.addClass('pressed');
  },
  'keyup': function (e) {
    var pressedKey = $('.k' + e.keyCode);
    pressedKey.removeClass('pressed');
  } });
    </script>
</body>
</html>