M1 Macbook Keyboard Using HTML & CSS

M1 Macbook Keyboard Using HTML & CSS – Animated Interactive Mackbook Keyboard (M1 Slide) built with HTML and CSS / CSS3 only.


  • Change font-family
  • Improve 3D animation

css number counter animation, counter js, macbook pro m1, js counter animation, macbook pro 2022 m1, media query css for all devices with example

Mac Keyboard & Trackpad Using Pure HTML5 CSS3

How to make use of 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 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 class="line-2">
                <div class="square">
                  <span class="content">~</span>
                  <span class="content">`</span>
                <div class="square">
                  <span class="content">!</span>
                  <span class="content">1</span>
                <div class="square">
                  <span class="content">@</span>
                  <span class="content">2</span>
                <div class="square">
                  <span class="content">#</span>
                  <span class="content">3</span>
                <div class="square">
                  <span class="content"><pre wp-pre-tag-0=""></pre>lt;/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 within the doc.

<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;

Macbook (M1) Keyboard Mockup, M1 Macbook Keyboard using HTML & CSS Github, apple m1 macbook pro

See Demo And Download

Official Website(darshanagandhi90): Click Here

This superior jQuery/javascript plugin is developed by darshanagandhi90. For extra Advanced Usages, please go to the official website.

Related Posts


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


Select Box Based Star Rating JavaScript Library | star-rating.js

star-rating.js is a small JavaScript library to create a customizable and gradually improved star rating control from a regular tick box with numeric values. The ES6 module…


Corner Fixed Notifications Alerts With Bootstrap | BS4 Show Notification

Bootstrap Notification is an easy-to-use jQuery plugin that uses the Bootstrap Alerts component to create static, rejectable, and stackable notification popups in the upper right corner of the…


Create Stackable Multi-level Sidebar Menu | HC Off-canvas Nav

Multi-Level Sidebar Slide Menu – HC MobileNav is a jQuery plugin for creating multi-level, mobile-first, totally accessible, off-canvas facet navigation that helps the infinite nesting of submenu…


Responsive Masonry Layout with SSR Support for Vue 3 | vue-masonry-wall

Vue masonry wall is a responsive masonry layout component for Vue 3 to deliver a Masonry-style responsive grid layout with SSR and RTL layout support. Features 📱…


A Bootstrap 5 Toast Notification Framework Library | bs-toaster

bs-toaster is simple to instantiate bs-toaster and create multiple toasts effortlessly using native Bootstrap 5! Feature Facts Small and clean Modern browser support. No IE sorry 💥…