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.