HTML
  <div id="keyboard" >
    <ul class="cf" >
      <li><a href="#" class="key esc"><span>esc</span></a></li>
      <li><a href="#" class="key fn"><span>F1</span></a></li>
      <li><a href="#" class="key fn"><span>F2</span></a></li>
      <li><a href="#" class="key fn"><span>F3</span></a></li>
      <li><a href="#" class="key fn"><span>F4</span></a></li>
      <li><a href="#" class="key fn"><span>F5</span></a></li>
      <li><a href="#" class="key fn"><span>F6</span></a></li>
      <li><a href="#" class="key fn"><span>F7</span></a></li>
      <li><a href="#" class="key fn"><span>F8</span></a></li>
      <li><a href="#" class="key fn"><span>F9</span></a></li>
      <li><a href="#" class="key fn"><span>F10</span></a></li>
      <li><a href="#" class="key fn"><span>F11</span></a></li>
      <li><a href="#" class="key fn"><span>F12</span></a></li>
      <li><a href="#" class="key fn"><span>Eject</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key number"><b>~</b><span>`</span></a></li>
      <li><a href="#" class="key number"><b>!</b><span>1</span></a></li>
      <li><a href="#" class="key number"><b>@</b><span>2</span></a></li>
      <li><a href="#" class="key number"><b>#</b><span>3</span></a></li>
      <li><a href="#" class="key number"><b>$</b><span>4</span></a></li>
      <li><a href="#" class="key number"><b>%</b><span>5</span></a></li>
      <li><a href="#" class="key number"><b>^</b><span>6</span></a></li>
      <li><a href="#" class="key number"><b>&</b><span>7</span></a></li>
      <li><a href="#" class="key number"><b>*</b><span>8</span></a></li>
      <li><a href="#" class="key number"><b>(</b><span>9</span></a></li>
      <li><a href="#" class="key number"><b>)</b><span>0</span></a></li>
      <li><a href="#" class="key number alt"><b>_</b><span>-</span></a></li>
      <li><a href="#" class="key number"><b>+</b><span>=</span></a></li>
      <li><a href="#" class="key delete"><span>Delete</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key tab"><span>tab</span></a></li>
      <li><a href="#" class="key qwerty"><span>q</span></a></li>
      <li><a href="#" class="key qwerty"><span>w</span></a></li>
      <li><a href="#" class="key qwerty"><span>e</span></a></li>
      <li><a href="#" class="key qwerty"><span>r</span></a></li>
      <li><a href="#" class="key qwerty"><span>t</span></a></li>
      <li><a href="#" class="key qwerty"><span>y</span></a></li>
      <li><a href="#" class="key qwerty"><span>u</span></a></li>
      <li><a href="#" class="key qwerty"><span>i</span></a></li>
      <li><a href="#" class="key qwerty"><span>o</span></a></li>
      <li><a href="#" class="key qwerty"><span>p</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>{</b><span>[</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>}</b><span>]</span></a></li>
      <li><a href="#" class="key qwerty alt"><b>|</b><span>\</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key caps" ><b></b><span>caps lock</span></a></li>
      <li><a href="#" class="key asdfg"><span>a</span></a></li>
      <li><a href="#" class="key asdfg"><span>s</span></a></li>
      <li><a href="#" class="key asdfg"><span>d</span></a></li>
      <li><a href="#" class="key asdfg"><span>f</span></a></li>
      <li><a href="#" class="key asdfg"><span>g</span></a></li>
      <li><a href="#" class="key asdfg"><span>h</span></a></li>
      <li><a href="#" class="key asdfg"><span>j</span></a></li>
      <li><a href="#" class="key asdfg"><span>k</span></a></li>
      <li><a href="#" class="key asdfg"><span>l</span></a></li>
      <li><a href="#" class="key asdfg alt"><b>:</b><span>;</span></a></li>
      <li><a href="#" class="key asdfg alt"><b>"</b><span>'</span></a></li>
      <li><a href="#" class="key enter" ><span>return</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key shiftleft"><span>Shift</span></a></li>
      <li><a href="#" class="key zxcvb"><span>z</span></a></li>
      <li><a href="#" class="key zxcvb"><span>x</span></a></li>
      <li><a href="#" class="key zxcvb"><span>c</span></a></li>
      <li><a href="#" class="key zxcvb"><span>v</span></a></li>
      <li><a href="#" class="key zxcvb"><span>b</span></a></li>
      <li><a href="#" class="key zxcvb"><span>n</span></a></li>
      <li><a href="#" class="key zxcvb"><span>m</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b><</b><span>,</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b>></b><span>.</span></a></li>
      <li><a href="#" class="key zxcvb alt"><b>?</b><span>/</span></a></li>
      <li><a href="#" class="key shiftright"><span>Shift</span></a></li>
    </ul>
    <ul class="cf" >
      <li><a href="#" class="key bottomrow fn" ><span>fn</span></a></li>
      <li><a href="#" class="key bottomrow control"><span>control</span></a></li>
      <li><a href="#" class="key bottomrow optionleft"><span>option</span></a></li>
      <li><a href="#" class="key bottomrow commandleft"><span>command</span></a></li>
      <li><a href="#" class="key bottomrow spacebar"></a></li>
      <li><a href="#" class="key bottomrow commandright"><span>command</span></a></li>
      <li><a href="#" class="key bottomrow optionright"><span>option</span></a></li>
      <ol class="cf">
        <li><a href="#" class="key left" ><span></span></a></li>
        <li>
          <a href="#" class="key up" ><span></span></a>
          <a href="#" class="key down" ><span></span></a>
        </li>
        <li><a href="#" class="key right" ><span></span></a></li>
      </ol>
    </ul>
  </div>
* {
  margin: 0;
  padding: 0;
}

ul ol {
  list-style-type: none;
}

#keyboard {
  margin: 15px auto 0;
  width: 794px;
  height: 315px;
  background:	none repeat-x scroll 0 0 #d5d9dc;
  -moz-border-radius-topleft: 7px 21px;
  -moz-border-radius-topright: 7px 21px;
  -moz-border-radius-bottomright: 10px;
  -moz-border-radius-bottomleft: 10px;
  border-top-left-radius: 7px 21px;
  border-top-right-radius: 7px 21px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  padding: 50px 0 0 10px;
  -webkit-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
  -moz-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
  box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
}

#keyboard ul {
  list-style-type: none;
  width: 784px;
  margin: 0 auto;
}

#keyboard li {
  float: left;
}

#keyboard ul, ol {
  padding: 0px;
  margin: 0;
}

/*!
 * less-keyboard v1.0.0 (http://emalherbi.github.io/less-keyboard/)
 * Copyright 2015-2015 emalherbi
 * Licensed under MIT (http://en.wikipedia.org/wiki/MIT_License)
 */

/* key */
.key {
  display: block;
  color: #aaaaaa;
  font: bold 9pt arial;
  text-decoration: none;
  text-align: center;
  width: 44px;
  height: 41px;
  margin: 5px;
  background: #eff0f2;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border-top: 1px solid #f5f5f5;
  -webkit-box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  -moz-box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  box-shadow: inset 0 0 25px #e8e8e8,
    0 1px 0 #c3c3c3,
    0 2px 0 #c9c9c9,
    0 2px 3px #333;
  text-shadow: 0px 1px 0px #f5f5f5;
}
.key:active {
  color: #888;
  background: #ebeced;
  margin: 7px 5px 3px;
  -webkit-box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  -moz-box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  box-shadow: inset 0 0 25px #ddd,
      0 0 3px #333;
  border-top: 1px solid #eee;
}
.key > span,
.key > b {
  background: inherit;
}
/* fn */
.fn {
  height: 26px;
  width: 46px;
}
.fn > span {
  display: block;
  text-align: right;
  margin: 14px 5px 0 0;
  font: bold 6pt arial;
  text-transform: uppercase;
}
/* esc */
.esc {
  height: 26px;
  width: 46px;
}
.esc > span {
  display: block;
  text-align: right;
  margin: 6px 15px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* numbers */
.number > span {
  display: block;
}
.number > b {
  margin: 3px 0 3px;
  display: block;
}
.number.alt > b {
  display: block;
  margin: 0 0 3px;
}
/* delete */
.delete {
  width: 72px;
}
.delete > span {
  display: block;
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* qwerty, asdfg, zxcvb */
.qwerty > span,
.asdfg > span,
.zxcvb > span {
  display: block;
  margin: 13px 0 0;
  text-transform: uppercase;
}
.qwerty > b,
.asdfg > b,
.zxcvb > b {
  display: block;
  margin: 3px 0 0;
}
.qwerty.alt > span,
.asdfg.alt > span,
.zxcvb.alt > span {
  text-transform: lowercase;
}
.asdfg.alt > span,
.zxcvb.alt > span {
  margin: 0;
}
.qwerty.alt > span {
  margin: 2px 0 0;
}
.zxcvb.alt > b {
  margin: 4px 0 0;
}
/* tab */
.tab {
  width: 72px;
}
.tab > span {
  display: block;
  text-align: left;
  margin: 23px 0 0 10px;
  font-size: 7.5pt;
  text-transform: uppercase;
}
/* caps */
.caps {
  width: 85px;
}
.caps > b {
  display: block;
  background: #999;
  width: 4px;
  height: 4px;
  border-radius: 10px;
  margin: 9px 0 0 10px;
  -webkit-box-shadow: inset 0 1px 0 #666;
  -moz-box-shadow: inset 0 1px 0 #666;
  box-shadow: inset 0 1px 0 #666;
}
.caps > span {
  display: block;
  text-align: left;
  margin: 10px 0 0 10px;
  font-size: 7.5pt;
  text-transform: lowercase;
}
/* enter */
.enter {
  width: 85px;
}
.enter > span {
  display: block;
  text-align: right;
  margin: 23px 10px 0 0;
  font-size: 7.5pt;
}
/* shift */
.shiftleft,
.shiftright {
  width: 112px;
}
.shiftleft > span,
.shiftright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.shiftleft > span {
  text-align: left;
  margin: 23px 0 0 10px;
}
.shiftright > span {
  text-align: right;
  margin: 23px 10px 0 0;
}
/* bottomrow */
.bottomrow {
  height: 49px;
}
.bottomrow.fn {
  height: 49px;
}
.bottomrow.fn > span {
  display: block;
  font-size: 7.5pt;
  margin: 31px 0 0 5px;
  text-transform: lowercase;
  text-align: left;
}
.bottomrow.optionleft,
.bottomrow.optionright {
  width: 46px;
}
.bottomrow.optionleft > span,
.bottomrow.optionright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.bottomrow.commandleft,
.bottomrow.commandright {
  width: 67px;
}
.bottomrow.commandleft > span,
.bottomrow.commandright > span {
  display: block;
  font-size: 7.5pt;
  text-transform: lowercase;
}
.bottomrow.optionleft > span,
.bottomrow.commandleft > span {
  margin: 31px 0 0 5px;
  text-align: left;
}
.bottomrow.optionright > span,
.bottomrow.commandright > span {
  margin: 31px 5px 0 0;
  text-align: right;
}
.bottomrow.spacebar {
  width: 226px;
}
.bottomrow.control {
  width: 54px;
}
.bottomrow.control > span {
  display: block;
  font-size: 7.5pt;
  margin: 31px 0 0 5px;
  text-transform: lowercase;
  text-align: left;
}
/* up, down, left, right */
.down {
  height: 23px;
  margin: 0 5px 5px;
}
.down:active {
  margin: 3px 5px 4px;
}
.up {
  height: 24px;
  margin: 5px 5px 1px;
}
.up:active {
  margin: 8px 5px -2px;
}
.down,
.up {
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.left,
.right {
  height: 24px;
  margin: 30px 5px 5px;
}
.left:active,
.right:active {
  margin: 32px 5px 3px;
}
.cf {
  zoom: 1;
}
.cf:before,
.cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}

JavaScript

				

Recently Added

Social Icons

SCSS social icon with hover effect and active state.

Loader

SCSS loader fade in and fade out.

Keyboard

CSS keyboard with beautiful color and effect.

Randomize

Showing random numbers mixed up.

Buttons

Buttons with beautiful hover effect.

Glass Effect

Beautiful glass effect with css.

Clip Animation

Creating clip animation with css.

Google Icons

Google logos with css.

Abstract Art

Abstract art with pure css. Combination of shapes created with css.