CodePen Embed - Apple Keyboard

<main>
  <div class="keyboard" ontouchstart="">
    <div class="row">
      <button type="button" class="btn-0">
        <span class="xs">esc</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="emoji">&#128261;</span>
        </span>
        <span class="lr xxxs">F1</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="emoji">&#128262;</span>
        </span>
        <span class="lr xxxs">F2</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="cascade"></span>
          <span class="block"></span>
        </span>
        <span class="lr xxxs">F3</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xxxs noxscale">
          <span class="apps"></span>
        </span>
        <span class="lr xxxs">F4</span>
      </button>
      <button type="button" class="btn-0">
        <span class="lr xxxs">F5</span>
      </button>
      <button type="button" class="btn-0">
        <span class="lr xxxs">F6</span>
      </button>
      <button type="button" class="btn-0">
        <span class="sm">
          <span class="left"></span>
          <span class="left"></span>
        </span>
        <span class="lr xxxs">F7</span>
      </button>
      <button type="button" class="btn-0">
        <span class="sm">
          <span class="right"></span>
          <span class="pause"></span>
        </span>
        <span class="lr xxxs">F8</span>
      </button>
      <button type="button" class="btn-0">
        <span class="sm">
          <span class="right"></span>
          <span class="right"></span>
        </span>
        <span class="lr xxxs">F9</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="emoji">&#128264;</span>
        </span>
        <span class="lr xxxs">F10</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="emoji">&#128265;</span>
        </span>
        <span class="lr xxxs">F11</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">
          <span class="emoji">&#128266;</span>
        </span>
        <span class="lr xxxs">F12</span>
      </button>
      <button type="button" class="btn-0">
        <span class="xs noxscale">⏏</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-1">
        <span class="lr xxxs">F13</span>
      </button>
      <button type="button" class="btn-1">
        <span class="lr xxxs">F14</span>
      </button>
      <button type="button" class="btn-1">
        <span class="lr xxxs">F15</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-1">
        <span class="lr xxxs">F16</span>
      </button>
      <button type="button" class="btn-1">
        <span class="lr xxxs">F17</span>
      </button>
      <button type="button" class="btn-1">
        <span class="lr xxxs">F18</span>
      </button>
      <button type="button" class="btn-1">
        <span class="lr xxxs">F19</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span class="sm">~<br/>`</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">!<br/>1</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">@<br/>2</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">#<br/>3</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">$<br/>4</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">%<br/>5</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">^<br/>6</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">&amp;<br/>7</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">*<br/>8</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">(<br/>9</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">)<br/>0</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">_<br/>-</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">+<br/>=</span>
      </button>
      <button type="button" class="btn-3">
        <span class="lr xs">delete</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span class="xs">fn</span>
      </button>
      <button type="button" class="btn-2">
        <span class="xs">home</span>
      </button>
      <button type="button" class="btn-2">
        <span class="xs">page up</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span class="xs">clear</span>
      </button>
      <button type="button" class="btn-2">
        <span>=</span>
      </button>
      <button type="button" class="btn-2">
        <span>/</span>
      </button>
      <button type="button" class="btn-2">
        <span>*</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-3">
        <span class="ll xs">tab</span>
      </button>
      <button type="button" class="btn-2">
        <span>Q</span>
      </button>
      <button type="button" class="btn-2">
        <span>W</span>
      </button>
      <button type="button" class="btn-2">
        <span>E</span>
      </button>
      <button type="button" class="btn-2">
        <span>R</span>
      </button>
      <button type="button" class="btn-2">
        <span>T</span>
      </button>
      <button type="button" class="btn-2">
        <span>Y</span>
      </button>
      <button type="button" class="btn-2">
        <span>U</span>
      </button>
      <button type="button" class="btn-2">
        <span>I</span>
      </button>
      <button type="button" class="btn-2">
        <span>O</span>
      </button>
      <button type="button" class="btn-2">
        <span>P</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">{<br/>[</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">}<br/>]</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">|<br/>\</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span class="xs noxpad">delete⌦</span>
      </button>
      <button type="button" class="btn-2">
        <span class="xs">end</span>
      </button>
      <button type="button" class="btn-2">
        <span class="xs">page down</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span>7</span>
      </button>
      <button type="button" class="btn-2">
        <span>8</span>
      </button>
      <button type="button" class="btn-2">
        <span>9</span>
      </button>
      <button type="button" class="btn-2">
        <span>-</span>
      </button>
    </div>
    <div class="row">
      <button type="button" id="caps-lock" class="btn-4" aria-pressed="false">
        <span class="ul xs dot-light" aria-hidden="true">•</span>
        <span class="ll xs">caps lock</span>
      </button>
      <button type="button" class="btn-2">
        <span>A</span>
      </button>
      <button type="button" class="btn-2">
        <span>S</span>
      </button>
      <button type="button" class="btn-2">
        <span>D</span>
      </button>
      <button type="button" class="btn-2">
        <span>F</span>
        <span class="bump"></span>
      </button>
      <button type="button" class="btn-2">
        <span>G</span>
      </button>
      <button type="button" class="btn-2">
        <span>H</span>
      </button>
      <button type="button" class="btn-2">
        <span>J</span>
        <span class="bump"></span>
      </button>
      <button type="button" class="btn-2">
        <span>K</span>
      </button>
      <button type="button" class="btn-2">
        <span>L</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">:<br/>;</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">&quot;<br/>'</span>
      </button>
      <button type="button" class="btn-4">
        <span class="lr xs">return</span>
      </button>
    </div>
    <div class="row"></div>
    <div class="row">
      <button type="button" class="btn-2">
        <span>4</span>
      </button>
      <button type="button" class="btn-2">
        <span>5</span>
        <span class="bump"></span>
      </button>
      <button type="button" class="btn-2">
        <span>6</span>
      </button>
      <button type="button" class="btn-2">
        <span>+</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-5">
        <span class="ll xs">shift</span>
      </button>
      <button type="button" class="btn-2">
        <span>Z</span>
      </button>
      <button type="button" class="btn-2">
        <span>X</span>
      </button>
      <button type="button" class="btn-2">
        <span>C</span>
      </button>
      <button type="button" class="btn-2">
        <span>V</span>
      </button>
      <button type="button" class="btn-2">
        <span>B</span>
      </button>
      <button type="button" class="btn-2">
        <span>N</span>
      </button>
      <button type="button" class="btn-2">
        <span>M</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">&lt;<br/>,</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">&gt;<br/>.</span>
      </button>
      <button type="button" class="btn-2">
        <span class="sm">?<br/>/</span>
      </button>
      <button type="button" class="btn-5">
        <span class="lr xs">shift</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span>
          <span class="up"></span>
        </span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span>1</span>
      </button>
      <button type="button" class="btn-2">
        <span>2</span>
      </button>
      <button type="button" class="btn-2">
        <span>3</span>
      </button>
      <button type="button" class="btn-10">
        <span class="lr xs">enter</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-7">
        <span class="ll xs">control</span>
      </button>
      <button type="button" class="btn-6">
        <span class="ul xxs">alt</span>
        <span class="ll xs">option</span>
      </button>
      <button type="button" class="btn-7">
        <span class="ll xs">command</span>
        <span class="lr xs noxscale">⌘</span>
      </button>
      <button type="button" class="btn-longest">
        <span></span>
      </button>
      <button type="button" class="btn-7">
        <span class="ll xs noxscale">⌘</span>
        <span class="lr xs">command</span>
      </button>
      <button type="button" class="btn-6">
        <span class="ur xxs">alt</span>
        <span class="lr xs">option</span>
      </button>
      <button type="button" class="btn-7">
        <span class="lr xs">control</span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-2">
        <span>
          <span class="left"></span>
        </span>
      </button>
      <button type="button" class="btn-2">
        <span>
          <span class="down"></span>
        </span>
      </button>
      <button type="button" class="btn-2">
        <span>
          <span class="right"></span>
        </span>
      </button>
    </div>
    <div class="row">
      <button type="button" class="btn-9">
        <span>0</span>
      </button>
      <button type="button" class="btn-8">
        <span>.</span>
      </button>
    </div>
  </div>
</main>

*,
*:before,
*:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  font-size: 16px;
}
body,
button {
  font: 1em -apple-system, BlinkMacSystemFont,"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
body {
  display: flex;
  height: 100vh;
}
button {
  background-color: hsl(0,0%,93%);
  border-radius: 0.125em;
  box-shadow:
    -0.2em -0.125em 0.125em hsla(0,0%,0%,0.25),
    0 0 0 0.04em hsla(0,0%,0%,0.3),
    0.02em 0.02em 0.02em hsla(0,0%,0%,0.4) inset,
    -0.05em -0.05em 0.02em hsla(0,0%,100%,0.8) inset;
  color: hsl(0,0%,47%);
  display: block;
  font-size: 1em;
  outline: transparent;
  position: relative;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &:active {
    box-shadow:
      0.1em 0.1em 0.1em hsla(0,0%,0%,0.2),
      0 0 0 0.05em hsla(0,0%,0%,0.4),
      -0.025em -0.05em 0.025em hsla(0,0%,100%,0.8) inset;
  }
  &:focus-visible {
    background-color: hsl(0,0%,100%);
    color: hsl(0,0%,54%);
  }
  & span {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  & > span {
    margin: auto;
    padding: 0.2em 0.375em;
    position: absolute;
    top: 50%;
    left: 0;
    font-size: 0.5em;
    line-height: 2;
    transform: translateY(-50%) scaleX(0.875);
    width: 100%;
  }
  &[aria-pressed="true"] .dot-light {
    color: hsl(88,100%,50%);
    text-shadow: 0 0 2px hsl(88,100%,27%);
  }
}
main {
  display: flex;
  overflow: auto;
  padding: 4.5em;
  width: 100vw;
  height: 100vh;
}

/* Keyboard */
.keyboard {
  background-image: linear-gradient(90deg,hsl(0,0%,53%),hsl(0,0%,80%));
  border-radius: 0.5em;
  box-shadow:
    -1em -1em 1.5em hsla(0,0%,0%,0.6),
    0 0 0 1px hsl(0,0%,67%) inset;
  display: grid;
  gap: 0.375em 0.875em;
  grid: {
    template: {
      columns: 21.25em 4.125em 5.65em;
      rows: 0.75em 1.125em 1.125em 1.125em 1.125em 1.375em;
    };
  };
  font-size: 36px;
  margin: auto;
  padding: 0.25em;
  width: 33.25em;
  height: 9em;
}
.row {
  display: flex;
  gap: 0.35em;

  &:nth-of-type(14) {
    margin: auto;
  }
  &:nth-of-type(n + 14):nth-of-type(-3n + 17) {
    transform: translateY(0.25em);
  }
}
.bump {
  border-radius: 0.1em;
  box-shadow: -0.05em -0.02em 0 0.05em hsla(0,0%,0%,0.3);
  padding: 0;
  top: 85%;
  left: calc(50% - 0.4em);
  width: 0.8em;
  height: 0.15em;
}

/* Button size */
.btn {
  &-0 {
    width: 1.19em;
    height: 0.75em;
  }
  &-1 {
    width: 1.125em;
    height: 0.75em;
  }
  &-2 {
    width: 1.125em;
    height: 1.125em;
  }
  &-3 {
    width: 2em;
    height: 1.125em;
  }
  &-4 {
    width: 2.3em;
    height: 1.125em;
  }
  &-5 {
    width: 3.05em;
    height: 1.125em;
  }
  &-6 {
    width: 1.5625em;
    height: 1.375em;
  }
  &-7 {
    width: 1.8375em;
    height: 1.375em;
  }
  &-8 {
    width: 1.125em;
    height: 1.375em;
  }
  &-9 {
    width: 2.6875em;
    height: 1.375em;
  }
  &-10 {
    width: 1.125em;
    height: 2.875em;
  }
  &-longest {
    width: 8.625em;
    height: 1.375em;
  }
}

/* Button text alignment */
.ul,
.ll,
.ur,
.lr {
  top: 0;
  transform: scaleX(0.875);
}
.ul,
.ll {
  justify-content: flex-start;
  transform-origin: 0 50%;
}
.ur,
.lr {
  justify-content: flex-end;
  transform-origin: 100% 50%;
}
.ll,
.lr {
  top: auto;
  bottom: 0;
}
.noxscale {
  transform: translateY(-50%) scaleX(1);
}
.ll,
.lr {
  &.noxscale {
    transform: scaleX(1);
  }
}

/* Button font size */
.xxxs {
  font-size: 0.2em;
  line-height: 1.5;
}
.xxs {
  font-size: 0.25em;
  line-height: 1.5;
}
.xs {
  font-size: 0.3em;
  line-height: 1.125;
}
.sm {
  font-size: 0.4em;
  line-height: 1.25;
}

/* Icons */
.up,
.right,
.down,
.left {
  width: 0;
  height: 0;
  vertical-align: 0.1em;
}
.up {
  border: {
    left: 0.25em solid transparent;
    right: 0.25em solid transparent;
    bottom: 0.5em solid currentColor;
  };
}
.right {
  border: {
    left: 0.5em solid currentColor;
    top: 0.25em solid transparent;
    bottom: 0.25em solid transparent;
  };
}
.down {
  border: {
    left: 0.25em solid transparent;
    right: 0.25em solid transparent;
    top: 0.5em solid currentColor;
  };
}
.left {
  border: {
    right: 0.5em solid currentColor;
    top: 0.25em solid transparent;
    bottom: 0.25em solid transparent;
  };
}
.pause {
  border: {
    left: 0.2em solid;
    right: 0.2em solid;
  };
  vertical-align: 0.1em;
  width: 0.475em;
  height: 0.5em;
}
.emoji {
  filter: saturate(0);
  -webkit-filter: saturate(0);
}
.block {
  margin-left: 0.1em;
  height: 0.8em;
  width: 0.6em;
  vertical-align: 0.1em;
}
.cascade {
  position: relative;
  height: 1em;
  width: 1.2em;

  &:before,
  &:after {
    content: "";
    position: absolute;
    height: 0.45em;
    width: 0.8em;
  }
  &:before {
    top: 0;
    left: 0;
  }
  &:after {
    right: 0;
    bottom: 0;
  }
}
.block,
.cascade:before,
.cascade:after {
  border: 1px solid;
}
.apps {
  &:before,
  &:after {
    font-weight: bold;
    display: block;
    content: "\25A1\25A1\25A1";
    line-height: 0.875;
  }
}

/* Miscellaneous */
.noxpad {
  padding: 0.2em 0;
}

/* IE 11 fix */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  button:not(:last-of-type) {
    margin-right: 0.35em;
  }
  .keyboard {
    display: -ms-grid;
    grid-gap: 0.375em 0.875em;
    -ms-grid-columns: 22.125em 5em 5.75em;
    -ms-grid-rows: 1.125em 1.5em 1.5em 1.5em 1.5em 1.375em;
  }
  .row {
    &:nth-child(3n + 2) {
      -ms-grid-column: 2;
    }
    &:nth-child(3n + 3) {
      -ms-grid-column: 3;
    }
    &:nth-child(n + 4):nth-child(-n + 6) {
      -ms-grid-row: 2;
    }
    &:nth-child(n + 7):nth-child(-n + 9) {
      -ms-grid-row: 3;
    }
    &:nth-child(n + 10):nth-child(-n + 12) {
      -ms-grid-row: 4;
    }
    &:nth-child(n + 13):nth-child(-n + 15) {
      -ms-grid-row: 5;
    }
    &:nth-child(n + 16) {
      -ms-grid-row: 6;
    }
    &:nth-of-type(14) button {
      transform: translateX(-0.5em);
    }
  }
}

View Compiled

// caps lock key
document.addEventListener("DOMContentLoaded", function() {
  const capsLock = document.getElementById("caps-lock");
  capsLock?.addEventListener("click", function() {
    const pressed = this.ariaPressed === "true";
    this.setAttribute("aria-pressed",!pressed);
  });
});

This Pen is owned by Jon Kantner on CodePen.

See more by @jkantner on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.