Macbook (M1) Keyboard Mockup In Pure CSS

Preview:

Description:

An animated, interactive Mackbook (M1 chip) keyboard mockup created using only HTML and CSS/CSS3.

How to use it:

1. Create the HTML for the Macbook keyboard.

<div class="cube-wrapper">
  <div class="cube">
    <div class="front-side">
      <div class="container-I">
        <div class="box">
          <div class="container">
            <div class="partition">
              <div class="line-1">
                <span class="esc f-key">
                  <span class="">esc</span>
                </span>
                <span class="f-key">f1</span>
                <span class="f-key">f2</span>
                <span class="f-key">f3</span>
                <span class="f-key">f4</span>
                <span class="f-key">f5</span>
                <span class="f-key">f6</span>
                <span class="f-key">f7</span>
                <span class="f-key">f8</span>
                <span class="f-key">f9</span>
                <span class="f-key">f10</span>
                <span class="f-key">f11</span>
                <span class="f-key">f12</span>
                <span class="touch-id f-key"></span>
              </div>
              <div class="line-2">
                <div class="square">
                  <span class="content">~</span>
                  <span class="content">`</span>
                </div>
                <div class="square">
                  <span class="content">!</span>
                  <span class="content">1</span>
                </div>
                <div class="square">
                  <span class="content">@</span>
                  <span class="content">2</span>
                </div>
                <div class="square">
                  <span class="content">#</span>
                  <span class="content">3</span>
                </div>
                <div class="square">
                  <span class="content">$</span>
                  <span class="content">4</span>
                </div>
                <div class="square">
                  <span class="content">%</span>
                  <span class="content">5</span>
                </div>
                <div class="square">
                  <span class="content">^</span>
                  <span class="content">6</span>
                </div>
                <div class="square">
                  <span class="content">&</span>
                  <span class="content">7</span>
                </div>
                <div class="square">
                  <span class="content">*</span>
                  <span class="content">8</span>
                </div>
                <div class="square">
                  <span class="content">(</span>
                  <span class="content">9</span>
                </div>
                <div class="square">
                  <span class="content">)</span>
                  <span class="content">0</span>
                </div>
                <div class="square">
                  <span class="content">⎯</span>
                  <span class="content">-</span>
                </div>
                <div class="square">
                  <span class="content">+</span>
                  <span class="content">=</span>
                </div>
                <div class="square delete">
                  <span>delete</span>
                </div>
              </div>
              <div class="line-3">
                <div class="tab square"><span>tab</span></div>
                <span class="square">Q</span>
                <span class="square">W</span>
                <span class="square">E</span>
                <span class="square">R</span>
                <span class="square">T</span>
                <span class="square">Y</span>
                <span class="square">U</span>
                <span class="square">I</span>
                <span class="square">O</span>
                <span class="square">P</span>
                <div class="square">
                  <span class="content">{</span
                  ><span class="content">[</span>
                </div>
                <div class="square">
                  <span class="content">}</span
                  ><span class="content">]</span>
                </div>
                <div class="square">
                  <span class="content">|</span
                  ><span class="content">\</span>
                </div>
              </div>
              <div class="line-4">
                <div class="caps square">
                  <span class="">●</span><span class="">caps lock</span>
                </div>
                <span class="square">A</span>
                <span class="square">S</span>
                <span class="square">D</span>
                <span class="square">F</span>
                <span class="square">G</span>
                <span class="square">H</span>
                <span class="square">J</span>
                <span class="square">K</span>
                <span class="square">L</span>
                <div class="square">
                  <span class="content">:</span
                  ><span class="content">;</span>
                </div>
                <div class="square">
                  <span class="content">"</span
                  ><span class="content">'</span>
                </div>
                <div class="delete square">
                  <span class="">return</span>
                </div>
              </div>
              <div class="line-5">
                <div class="shift square">
                  <span class="">shift</span>
                </div>
                <span class="square">Z</span>
                <span class="square">X</span>
                <span class="square">C</span>
                <span class="square">V</span>
                <span class="square">B</span>
                <span class="square">N</span>
                <span class="square">M</span>
                <div class="square">
                  <span class="content"><</span
                  ><span class="content">,</span>
                </div>
                <div class="square">
                  <span class="content">></span
                  ><span class="content">.</span>
                </div>
                <div class="square">
                  <span class="content">?</span
                  ><span class="content">/</span>
                </div>
                <div class="shift2 square">
                  <span class="">shift</span>
                </div>
              </div>
              <div class="line-2">
                <div class="square font-size">
                  <div class="content fn">fn</div>
                  <span class="content sub-fn">⎈</span>
                </div>
                <div class="square font-size">
                  <span class="content fn">^</span>
                  <span class="content">control</span>
                </div>
                <div class="square font-size">
                  <span class="content fn">⎇</span>
                  <span class="content">option</span>
                </div>
                <div class="square font-size command">
                  <span class="content fn">⌘</span>
                  <span class="content">command</span>
                </div>
                <div class="square space-bar">
                  <span class="content"></span>
                </div>
                <div class="square font-size command">
                  <span class="content fn-last">⌘</span>
                  <span class="content">command</span>
                </div>
                <div class="square font-size">
                  <span class="content fn-last">⎇</span>
                  <span class="content">option</span>
                </div>
                <div class="arrow-wrapper">
                  <span class="f-key arrow">▲</span>
                  <div class="down-arrows">
                    <span class="f-key arrow">◀︎</span>
                    <span class="f-key arrow">▼</span>
                    <span class="f-key arrow">▶︎</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="track-pad"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="back-side">
      <!-- <div class="section-1">
        <div class="back-dot">●</div>
        <div class="back-dot">●</div>
      </div>
      <div class="section-1">
        <div class="back-dot">●</div>
        <div class="back-dot">●</div>
      </div> -->
    </div>
  </div>
</div>

2. Load the required stylesheet in the document and done.

<link rel="stylesheet" href="style.css" />

3. Override the default styles.

:root {
  --gold-color: #ffd8bf;
  --white: #ebe6e6;
  --gold-shadow: #a87961;
  --white-plain: #fff;
  --black: #202124;
  --black-plain: #000;
  --dark-gold: #9f6e57;
  --light-gold: #f9d2b8;
}