Apple-Mice.markdown

Apple Mice

A homage to all the Apple Mice over the years (made with pure CSS).

A Pen by Josh Bader on CodePen.

License.

index.html

<h1>Apple Mice</h1>

<div class="mouse magic">
  <div class="cable">
    <i></i><i></i><i></i><i></i><i></i>
  </div>
  <div class="logo">&#63743;</div>
  <div class="button"></div>
  <div class="top"></div>
</div>

<ul data-mouse="magic mouse">
 <li data-mouse="lisa">&bull;</li>
 <li data-mouse="macintosh">&bull;</li>
 <li data-mouse="adb">&bull;</li>
 <li data-mouse="adb2">&bull;</li>
 <li data-mouse="imac">&bull;</li>
 <li data-mouse="pro">&bull;</li>
 <li data-mouse="mighty">&bull;</li>
 <li class="active" data-mouse="magic">&bull;</li>
</ul>

script.js

$('li').on('click', function() {
		var self = $(this);
		$('.active').removeClass('active');
		self.addClass('active');
		self.closest('ul').attr('data-mouse', self.data('mouse') + ' mouse');
		$('.mouse').removeAttr('class').addClass('mouse ' + self.data('mouse'));
	});

style.css

* {
	padding: 0; margin: 0;
	-webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; }

body { background: #eee; }

h1 {
  position: absolute; top: 20px; left: 20px;
	color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 100; font-size: 40px; text-transform: uppercase; text-align: center; }

ul { text-align: center; width: 100%; position: absolute; top: 500px; }
li { display: inline; margin: 0 3px; color: #ccc; font-size: 30px; cursor: pointer; }
li.active { color: #999; }
ul:after {
	content: attr(data-mouse); display: block;
	color: #ccc; font-family: 'Helvetica Neue', Helvetica, Arial; font-weight: 100; font-size: 40px; text-transform: uppercase; text-align: center; }


/* Lisa */

.lisa.mouse, .lisa.mouse .top {
	background: #cbc9b8;
	box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 3px 2px 1px rgba(255,255,255,0.4), inset 0 -20px 3px -1px rgba(0,0,0,0.15), 0 8px 0 rgba(0,0,0,0.06); }

.lisa.mouse {
	width: 180px; height: 270px; padding: 20px; margin: 100px auto; position: relative;
	border: 0px solid transparent;
	border-radius: 25px 25px 3px 3px; }

.lisa.mouse .top {
	width: 130px; height: 250px; padding: 25px; position: absolute; top: 20px; left: 20px;
	border-radius: 10px 10px 3px 3px; }

.lisa .cable, .lisa .cable i, .lisa .button { background: #8f9382; }

.lisa .cable {
	width: 10px; height: 120px; position: absolute; top: -120px; left: 105px;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

.lisa .cable i {
	position: absolute;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
	border-radius: 4px 4px 0 0; }

.lisa .cable i:nth-child(1) { width: 80px; height: 20px; top: 100px; left: -35px; }
.lisa .cable i:nth-child(2) { width: 60px; height: 10px; top: 90px; left: -25px; }
.lisa .cable i:nth-child(3) { width: 50px; height: 10px; top: 80px; left: -20px; }
.lisa .cable i:nth-child(4) { width: 40px; height: 10px; top: 70px; left: -15px; }
.lisa .cable i:nth-child(5) { width: 30px; height: 10px; top: 60px; left: -10px; }

.lisa .button {
	width: 156px; height: 50px; position: absolute; top: 32px; left: 30px; z-index: 10;
	box-shadow: inset 0 2px 2px 1px rgba(255,255,255,0.4), inset 0 -3px 2px rgba(0,0,0,0.15);
	border: 2px solid #535139;
	border-radius: 8px; }

.lisa .logo {
	padding: 2px 6px; position: absolute; top: 245px; left: 25px; z-index: 20;
	color: #cbc9b8; font-size: 25px;
	border-width: 2px; border-style: solid; border-color: rgba(0,0,0,0.05); border-top-color: rgba(0,0,0,0.15); border-bottom-color: rgba(255,255,255,0.4);
	border-radius: 3px;
	text-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 -2px 0 rgba(255,255,255,0.4); }


/* Mac */

.macintosh.mouse, .macintosh.mouse .top { background: #e3daac; }

.macintosh.mouse {
	width: 140px; height: 155px; padding: 20px; margin: 100px auto 105px; position: relative;
	box-shadow: 0 20px 0 0 #c1b992, 0 25px 0 rgba(0,0,0,0.06);
	border-top: 50px solid rgba(255,255,255,0.4); border-bottom: 60px solid rgba(0,0,0,0.1); border-left: 20px solid rgba(0,0,0,0.05); border-right: 20px solid rgba(0,0,0,0.05);
	border-radius: 10px; }

.macintosh.mouse .top {
	width: 190px; height: 220px; padding: 0; position: absolute; top: -10px; left: -5px;
	border-radius: 5px; }

.macintosh .cable, .macintosh .cable i, .macintosh .button { background: #beaf69; }

.macintosh .cable {
	width: 10px; height: 120px; position: absolute; top: -170px; left: 85px;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

.macintosh .cable i {
	position: absolute;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
	border-radius: 3px 3px 0 0; }

.macintosh .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
.macintosh .cable i:nth-child(2) { width: 50px; height: 10px; top: 110px; left: -20px; }
.macintosh .cable i:nth-child(3) { width: 40px; height: 10px; top: 100px; left: -15px; }
.macintosh .cable i:nth-child(4) { width: 30px; height: 10px; top: 90px; left: -10px; }
.macintosh .cable i:nth-child(5) { width: 20px; height: 10px; top: 80px; left: -5px; }

.macintosh .button {
	width: 146px; height: 100px; position: absolute; top: -35px; left: 15px; z-index: 10;
	box-shadow: inset 0 20px 2px 1px rgba(255,255,255,0.2), inset 0 -3px 2px -1px rgba(0,0,0,0.15);
	border: 2px solid #75672f;
	border-radius: 8px; }

.macintosh .logo {
	padding: 2px 6px; position: absolute; top: 155px; left: 15px; z-index: 20;
	color: #e3daac; font-size: 25px;
	border-width: 2px; border-style: solid; border-color: rgba(0,0,0,0.05); border-top-color: rgba(0,0,0,0.15); border-bottom-color: rgba(255,255,255,0.4);
	border-radius: 3px;
	text-shadow: 0 2px 0 rgba(0,0,0,0.15), 0 -2px 0 rgba(255,255,255,0.4); }


/* ADB */

.adb.mouse {
	width: 180px; height: 0; padding: 0; margin: 110px auto 195px; position: relative;
	box-shadow: 0 -25px 0 -19px #dfddcf;
	border-width: 20px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 205px; border-bottom-color: #d6d4c6;
	border-radius: 30px 30px 0 0; }

.adb.mouse .top {
	width: 220px; height: 110px; padding: 0; position: absolute; top: 205px; left: -20px;
	background: #cccaba;
	box-shadow: inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), inset 0 1px 5px 2px #d6d4c6, 0 5px 0 rgba(0,0,0,0.06);
	border-radius: 0 0 10px 10px; }

.adb .cable, .adb .cable i { background: #bbb4a1; }

.adb .cable {
	width: 10px; height: 120px; position: absolute; top: -125px; left: 83px;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

.adb .cable i {
	position: absolute;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
	border-radius: 3px 3px 0 0; }

.adb .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
.adb .cable i:nth-child(2) { width: 50px; height: 0px; top: 120px; left: -20px; }
.adb .cable i:nth-child(3) { width: 36px; height: 10px; top: 110px; left: -13px; }
.adb .cable i:nth-child(4) { width: 26px; height: 10px; top: 100px; left: -8px; }
.adb .cable i:nth-child(5) { width: 16px; height: 10px; top: 90px; left: -3px; }

.adb .button {
	width: 136px; height: 100px; position: absolute; top: 15px; left: 20px; z-index: 10;
	background: #d6d4c6;
	box-shadow: inset 0 3px 2px 1px rgba(255,255,255,0.2), inset 0 -2px 2px -1px rgba(0,0,0,0.15);
	border: 2px solid #a09f8a;
	border-radius: 8px; }

.adb .logo {
	padding: 2px 6px; position: absolute; top: 265px; left: 0; z-index: 20;
	color: #cccaba; font-size: 30px;
	border: 0px solid transparent;
	border-radius: 3px;
	text-shadow: 0 -2px 0 rgba(0,0,0,0.15), 0 2px 0 rgba(255,255,255,0.4); }


/* ADB2 */

.adb2.mouse {
	width: 182px; height: 0; padding: 0; margin: 170px auto 218px; position: relative;
	box-shadow: 0 -12px 0 -8px rgba(0,0,0,0.45);
	border-width: 15px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 122px; border-bottom-color: #d6d4c6;
	border-radius: 50% 50% 0 0; }

.adb2.mouse .top {
	width: 216px; height: 240px; padding: 0; position: absolute; top: 28px; left: -17px;
	background: #d6d4c6;
	box-shadow: inset 0 -30px 40px -10px rgba(0,0,0,0.1), 0 8px 0 rgba(0,0,0,0.06);
	border-radius: 50%; }

.adb2 .cable, .adb2 .cable i { background: #bbb4a1; }

.adb2 .cable {
	width: 10px; height: 120px; position: absolute; top: -205px; left: 83px; z-index: -10;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

.adb2 .cable i {
	position: absolute;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 2px rgba(0,0,0,0.08);
	border-radius: 50% 50% 0 0; }

.adb2 .cable i:nth-child(1) { width: 80px; height: 0; top: 120px; left: -35px; }
.adb2 .cable i:nth-child(2) { width: 50px; height: 0px; top: 120px; left: -20px; }
.adb2 .cable i:nth-child(3) { width: 36px; height: 10px; top: 110px; left: -13px; }
.adb2 .cable i:nth-child(4) { width: 26px; height: 10px; top: 102px; left: -8px; z-index: -5; }
.adb2 .cable i:nth-child(5) { width: 16px; height: 10px; top: 94px; left: -3px; z-index: -10; }

.adb2 .button {
	width: 140px; height: 0; position: absolute; top: -84px; left: -4px; z-index: -10;
	background: transparent;
	box-shadow: 0 -16px 0 -13px #e9e7da;
	border-width: 25px; border-style: solid; border-color: transparent; border-top-width: 0; border-bottom-width: 120px; border-bottom-color: #d6d4c6;
	border-radius: 50% 50% 0 0; }

.adb2 .logo {
	padding: 2px 6px; position: absolute; top: 163px; left: 68px; z-index: 20;
	color: #d6d4c6; font-size: 34px;
	border: 0px solid transparent;
	border-radius: 3px;
	text-shadow: 0 -2px 0 rgba(0,0,0,0.15), 0 2px 0 rgba(255,255,255,0.4); }


/* iMac */

.imac.mouse {
	width: 220px; height: 220px; padding: 0; margin: 120px auto 170px; position: relative;
	background: #00b2c5;
	box-shadow: 0 0 0 rgba(0,0,0,0), 0 0 0 rgba(0,0,0,0), inset 0 3px 10px -2px rgba(255,255,255,1), inset 0 -3px 10px -2px rgba(0,0,0,0.3), 0 8px 0 rgba(0,0,0,0.06);
	border: 0px solid transparent;
	border-radius: 50%; }

.imac.mouse .top {
	width: 174px; height: 130px; padding: 0; position: absolute; top: 91px; left: 23px;
	background: #ebeee9;
	box-shadow: inset 0 -3px 20px -10px rgba(0,0,0,0.1), inset 0 -20px 30px -5px #ebeee9, inset 0 -20px 40px -10px rgba(130,190,180,0.5), 0 -40px 0 #ebeee9;
	border-radius: 50%; }

.imac .cable {
	width: 10px; height: 140px; position: absolute; top: -135px; left: 105px; z-index: 10;
	background: #ebeee9;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.15); }

.imac .cable i:nth-child(1) {
	width: 174px; height: 130px; position: absolute; top: 134px; left: -83px; z-index: 10;
	background: #ebeee9;
	box-shadow: inset 0 20px 30px -5px #ebeee9, inset 0 20px 40px -10px rgba(130,190,180,0.5);
	border-radius: 50%; }

.imac .cable i:nth-child(2) {
	width: 30px; height: 45px; position: absolute; top: 215px; left: -101px; z-index: 10;
	background: #00b2c5;
	border-radius: 50% 100% 50% 50%; }

.imac .cable i:nth-child(3) {
	width: 30px; height: 45px; position: absolute; top: 215px; left: 79px; z-index: 10;
	background: #00b2c5;
	border-radius: 100% 50% 50% 50%; }

.imac .cable i:nth-child(4) {
	width: 30px; height: 45px; position: absolute; top: 233px; left: -101px; z-index: 10;
	background: #00b2c5;
	border-radius: 50% 50% 100% 50%; }

.imac .cable i:nth-child(5) {
	width: 30px; height: 45px; position: absolute; top: 233px; left: 79px; z-index: 10;
	background: #00b2c5;
	border-radius: 50% 50% 50% 100%; }

.imac .button {
	width: 144px; height: 80px; position: absolute; top: 0; left: 37px; z-index: 10;
	background: #ebeee9;
	box-shadow: inset 0 3px 10px -5px rgba(0,0,0,0.1), inset 0 -3px 20px -5px rgba(0,0,0,0.05), 0 3px 10px -2px rgba(255,255,255,0.5), inset 0 20px 30px -5px #ebeee9, inset 0 20px 40px -10px rgba(130,190,180,0.5);
	border: 0px solid transparent;
	border-radius: 50%; }

.imac .logo {
	padding: 4px 10px; position: absolute; top: 90px; left: 85px; z-index: 20;
	color: #e0e6e2; font-size: 34px;
	background: rgba(130,190,180,0.1);
	box-shadow: 0 -2px 2px rgba(0,0,0,0.05), 0 2px 2px rgba(255,255,255,0.5), 0 -20px 40px 10px rgba(130,190,180,0.1), 0 20px 40px 10px rgba(130,190,180,0.1);
	border: 0px solid transparent;
	border-radius: 50%;
	text-shadow: 0 -2px 0 rgba(0,0,0,0.08), 0 2px 0 rgba(255,255,255,0.4); }


/* Pro */

.pro.mouse {
	width: 170px; height: 320px; padding: 0; margin: 100px auto 90px; position: relative;
	background: #f5f5f5;
	box-shadow: inset 0 3px 20px -5px rgba(255,255,255,1), inset 0 -3px 50px -15px rgba(0,0,0,0.6);
	border: 0px solid transparent;
	border-radius: 85px; }

.pro.mouse .top {
	width: 200px; height: 350px; padding: 0; position: absolute; top: -15px; left: -15px; z-index: 20;
	background: rgba(255,255,255,0.4);
	box-shadow: inset 0 0 0 rgba(255,255,255,0), inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), 0 8px 0 rgba(0,0,0,0.02);
	border-radius: 100px; }

.pro .cable {
	width: 10px; height: 140px; position: absolute; top: -140px; left: 80px; z-index: 10;
	background: #f5f5f5;
	box-shadow: inset 3px 0 1px rgba(255,255,255,0.3), inset -3px 0 2px rgba(0,0,0,0.08); }

.pro .cable i {
	position: absolute;
	background: #f9f9f9;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

.pro .cable i:nth-child(1) { width: 0; height: 0; top: 120px; left: 5px; }
.pro .cable i:nth-child(2) { width: 30px; height: 70px; top: 220px; left: -95px; border-radius: 0 50px 50px 0; }
.pro .cable i:nth-child(3) { width: 30px; height: 70px; top: 220px; left: 75px; border-radius: 50px 0 0 50px; }
.pro .cable i:nth-child(4) { width: 0; height: 0; top: 120px; left: 5px; }
.pro .cable i:nth-child(5) { width: 0; height: 0; top: 120px; left: 5px; }

.pro .button { width: 0; height: 0; position: absolute; top: 0; left: 80px; z-index: 10; }

.pro .logo {
	position: absolute; top: 190px; left: 70px; z-index: 30;
	color: #ddd; font-size: 34px; }


/* Mighty */

.mighty.mouse {
	width: 170px; height: 320px; padding: 0; margin: 95px auto; position: relative;
	border: 0px solid transparent;
	border-radius: 85px; }

.mighty.mouse .top {
	width: 200px; height: 350px; padding: 0; position: absolute; top: -15px; left: -15px; z-index: 20;
	background: #f9f9f9;
	box-shadow: inset 0 3px 30px -5px rgba(255,255,255,1), inset 0 -3px 60px -15px rgba(0,0,0,0.5), inset 0 0 0 rgba(0,0,0,0), 0 8px 0 rgba(0,0,0,0.02);
	border-radius: 100px; }

.mighty .cable { width: 0; height: 0; position: absolute; top: 0; left: 85px; }

.mighty .cable i {
	width: 0; height: 0; position: absolute; top: 120px; left: 0;
	background: #f9f9f9;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

.mighty .button {
	width: 14px; height: 14px; position: absolute; top: 40px; left: 75px; z-index: 30;
	background: #ddd;
	box-shadow: inset 0 3px 8px rgba(255,255,255,0.8), inset 0 -3px 8px rgba(0,0,0,0.2), 0 3px 2px rgba(0,0,0,0.07);
	border: 1px solid #ddd;
	border-radius: 50%; }

.mighty .logo {
	position: absolute; top: 190px; left: 70px; z-index: 30;
	color: #f7f7f7; font-size: 34px;
	text-shadow: 0 -2px 0 rgba(0,0,0,0.08), 0 2px 0 rgba(255,255,255,1); }


/* Magic */

.magic.mouse {
	width: 200px; height: 420px; padding: 0; margin: 45px auto; position: relative;
	background: #fff;
	border: 0px solid transparent;
	border-radius: 75px;
	-webkit-transform: scaleY(0.85); -moz-transform: scaleY(0.85); transform: scaleY(0.85); }

.magic.mouse .top {
	width: 200px; height: 423px; padding: 0; position: absolute; top: -2px; left: 0; z-index: 20;
	background: #f7f7f7;
	box-shadow: inset 0 20px 50px 10px rgba(255,255,255,1), inset 0 0 0 rgba(0,0,0,0), inset 0 0 0 rgba(0,0,0,0), 0 10px 0 rgba(0,0,0,0.02);
	border-radius: 90px; }

.magic .cable { width: 0; height: 0; position: absolute; top: 0; left: 100px; }

.magic .cable i {
	width: 0; height: 0; position: absolute; top: 120px; left: 0;
	background: #f9f9f9;
	box-shadow: inset 0 2px 1px rgba(255,255,255,0.3), inset 0 -3px 5px rgba(0,0,0,0.08); }

.magic .button { width: 0; height: 0; position: absolute; top: 0; left: 100px; z-index: 10; }

.magic .logo {
	position: absolute; top: 290px; left: 82px; z-index: 30;
	color: #ddd; font-size: 45px;
	-webkit-transform: scaleY(1.15); -moz-transform: scaleY(1.15); transform: scaleY(1.15) }

/* Media Queries */

@media (max-width: 500px) {
  h1 { display: none; }
}