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;
}See Also:
Add Custom Keyboard Shortcuts to Your Site with Hotkey.js
Showcase Web Projects With Realistic Chrome Mockups – browser-mockup.js
Custom Keybinds and Hotkeys in JavaScript – Keybind.js
Responsive Mobile-compatible Virtual Keyboard In JavaScript – simple-keyboard
Bind Custom Functions To Keys And Key Combos – Keystrokes.js
Tiny & Robust Keyboard Shortcut Solution For JavaScript – Mousetrap
Handling Keyboard And Gamepad Inputs – hotkeys-inputs-js
Lightweight Key Binding JavaScript Library – Keybinder