Pure CSS Nintendo Controllers

Developer
Karl Saunders
Size
8,691 Kb
Views
8,096
  1. Pure CSS Nintendo Controllers Previews
  2. Pure CSS Nintendo Controllers HTML Codes
  3. Pure CSS Nintendo Controllers CSS Codes
  4. Pure CSS Nintendo Controllers JS Codes

How do I make an pure css nintendo controllers?

What is a pure css nintendo controllers? How do you make a pure css nintendo controllers? This script and codes were developed by Karl Saunders on 20 November 2022, Sunday.

Pure CSS Nintendo Controllers Previews
IQ Test

Pure CSS Nintendo Controllers - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Nintendo Controllers</title> <link rel='stylesheet prefetch' href='https://app.mobiuswebdesign.co.uk/plugins/controller/css/icons.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul id="gallery"> <li> <div class="controller nes"> <div class="controller-inner"> <div class="controller-left"> <div class="d-pad"> <div class="up"></div> <div class="right"></div> <div class="down"></div> <div class="left"></div> </div> </div> <div class="center"> <div class="main-buttons"> <div class="select"></div> <div class="start"></div> </div> </div> <div class="controller-right"> <div class="logo"><span class="icon-nintendo"></span></div> <div class="buttons"> <div class="button"></div> <div class="button"></div> </div> </div> </div> </div> </li> <li> <div class="controller snes"> <div class="controller-left"> <div class="d-pad"> <div class="up"></div> <div class="right"></div> <div class="down"></div> <div class="left"></div> </div> </div> <div class="center"> </div> <div class="controller-right"> <div class="buttons"> <div class="button-set"> <div class="button blue"></div> <div class="button green"></div> </div> <div class="button-set"> <div class="button red"></div> <div class="button yellow"></div> </div> </div> </div> <div class="logo"> <span class="icon-snes"></span> </div> <div class="select"></div> <div class="start"></div> </div> </li> <li> <div class="controller n64"> <div class="controller-left"> <div class="d-pad"> <div class="up"></div> <div class="right"></div> <div class="down"></div> <div class="left"></div> </div> </div> <div class="controller-center"> <div class="logo"> <span class="icon-nintendo-main"></span> </div> <div class="start"></div> <div class="stick-container"> <div class="stick"></div> </div> </div> <div class="controller-right"> <div class="buttons-left"> <div class="button"></div> <div class="button"></div> </div> <div class="buttons-right"> <div class="button"></div> <div class="button"></div> <div class="button"></div> <div class="button"></div> </div> </div> </div> </li> </ul>
</div> <script src='https://app.mobiuswebdesign.co.uk/plugins/controller/js/gallery.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Nintendo Controllers - Script Codes CSS Codes

* {	box-sizing: border-box;
}
body {	overflow-x: hidden;
}
h2 {	font-family: 'Nes Controller';
}
.controller {	position: relative;
}
.gallery-wrapper {	overflow: hidden;	position: relative;
}
.gallery-wrapper ul {	height: 100%;	margin: 0;	padding: 0;	width: 10000px;
}
.gallery-item {	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	float: left;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	list-style: outside none none;	-webkit-filter: blur(5px); filter: blur(5px);	/*transform: scale(0.6, 0.6);*/
}
.gallery-item.active {	-webkit-filter: blur(0px); filter: blur(0px);	/*transform: scale(1, 1);*/
}
.gallery-navigation {	background-color: transparent;	border: medium none;	cursor: pointer;	height: 75px;	position: absolute;	top: 50%;	-webkit-transform: translateY(-50%); transform: translateY(-50%);	width: 75px;	-webkit-transition: opacity 500ms;	transition: opacity 500ms;	opacity: 1;
}
.gallery-navigation::after {	position: absolute;	left: 0;	top: 0;	width: 100%;	height: 100%;	background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iNTEyIgogICBoZWlnaHQ9IjUxMiIKICAgaWQ9InN2ZzIiCiAgIHNvZGlwb2RpOnZlcnNpb249IjAuMzIiCiAgIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2IgogICBzb2RpcG9kaTpkb2NuYW1lPSJjaGV2cm9uLWxlZnQuc3ZnIgogICB2ZXJzaW9uPSIxLjAiCiAgIGlua3NjYXBlOm91dHB1dF9leHRlbnNpb249Im9yZy5pbmtzY2FwZS5vdXRwdXQuc3ZnLmlua3NjYXBlIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzNCIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iMC4zMiIKICAgICBpbmtzY2FwZTpjeD0iLTgyOC43Nzg3IgogICAgIGlua3NjYXBlOmN5PSIzMTEuOTEzODQiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4IgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InRleHQxMDU0NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctd2lkdGg9IjE0ODciCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAyMSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iMjgiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiCiAgICAgZml0LW1hcmdpbi10b3A9IjAiCiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIgogICAgIGZpdC1tYXJnaW4tcmlnaHQ9IjAiCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGUgLz4KICAgICAgICA8ZGM6Y3JlYXRvcj4KICAgICAgICAgIDxjYzpBZ2VudD4KICAgICAgICAgICAgPGRjOnRpdGxlIC8+CiAgICAgICAgICA8L2NjOkFnZW50PgogICAgICAgIDwvZGM6Y3JlYXRvcj4KICAgICAgICA8ZGM6c3ViamVjdD4KICAgICAgICAgIDxyZGY6QmFnIC8+CiAgICAgICAgPC9kYzpzdWJqZWN0PgogICAgICAgIDxjYzpsaWNlbnNlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9wdWJsaWNkb21haW4vIiAvPgogICAgICAgIDxkYzpkZXNjcmlwdGlvbiAvPgogICAgICAgIDxkYzpjb250cmlidXRvcj4KICAgICAgICAgIDxjYzpBZ2VudD4KICAgICAgICAgICAgPGRjOnRpdGxlIC8+CiAgICAgICAgICA8L2NjOkFnZW50PgogICAgICAgIDwvZGM6Y29udHJpYnV0b3I+CiAgICAgIDwvY2M6V29yaz4KICAgICAgPGNjOkxpY2Vuc2UKICAgICAgICAgcmRmOmFib3V0PSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9saWNlbnNlcy9wdWJsaWNkb21haW4vIj4KICAgICAgICA8Y2M6cGVybWl0cwogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjUmVwcm9kdWN0aW9uIiAvPgogICAgICAgIDxjYzpwZXJtaXRzCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyNEaXN0cmlidXRpb24iIC8+CiAgICAgICAgPGNjOnBlcm1pdHMKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zI0Rlcml2YXRpdmVXb3JrcyIgLz4KICAgICAgPC9jYzpMaWNlbnNlPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM3NC4yMTc4NSwtNjIuMjM2Mzc0KSI+CiAgICA8ZwogICAgICAgc3R5bGU9ImZvbnQtc2l6ZToxMzUzLjkwMjIyMTY4cHg7Zm9udC1zdHlsZTppdGFsaWM7Zm9udC12YXJpYW50Om5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zdHJldGNoOm5vcm1hbDtsaW5lLWhlaWdodDoxMjUlO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtmb250LWZhbWlseTpTZXJpZjstaW5rc2NhcGUtZm9udC1zcGVjaWZpY2F0aW9uOlNlcmlmIEl0YWxpYyIKICAgICAgIGlkPSJ0ZXh0MTA1NDYiPgogICAgICA8cGF0aAogICAgICAgICBzdHlsZT0iZm9udC1zaXplOjEzNTMuOTAyMjIxNjhweDtmb250LXN0eWxlOml0YWxpYztmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2xpbmUtaGVpZ2h0OjEyNSU7bGV0dGVyLXNwYWNpbmc6MHB4O3dvcmQtc3BhY2luZzowcHg7ZmlsbDojMDAwMDAwO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO2ZvbnQtZmFtaWx5OlNlcmlmOy1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2VyaWYgSXRhbGljIgogICAgICAgICBkPSJtIDQ2NC4wOTAyMiwzMTguMjM2MzUgNzYuMjU1MzIsNzYuMjU1MzIgMTc5Ljc0NDU4LDE3OS43NDQ3IDc2LjI1NTM3LC03Ni4yNTUzMiBMIDYxNi42MDA4MiwzMTguMjM2MzcgNzk2LjM0NTQyLDEzOC40OTE3NyA3MjAuMDkwMTEsNjIuMjM2Mzc2IDU0MC4zNDU1NSwyNDEuOTgxMDkgNDY0LjA5MDIxLDMxOC4yMzYzNSB6IgogICAgICAgICBpZD0icmVjdDMwMDYiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K");	background-size: 100% auto;	content: "";
}
.gallery-navigation.prev {	left: 0;
}
.gallery-navigation.next {	right: 0;
}
.gallery-navigation.next::after {	right: 0;	-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.gallery-navigation.inactive {	opacity: 0;
}
/*---------------------------------------------	NES CONTROLLER
----------------------------------------------*/
.nes { width: 460px; height: 176px; background-color: #bdbdbd; border-radius: 5px;
}
.nes .controller-inner {	position: absolute;	width: 448px;	height: 148px;	left: 6px;	bottom: 6px;	background-color: #222;	border-radius: 5px;	overflow: hidden;
}
.nes .center {	position: absolute;	width: 112px;	height: 100%;	left: 168px;	top: 0;
}
.nes .center::before, .nes .center::after {	position: absolute;	left: 0;	width: 100%;	height: 20px;	background-color: #777f82;	border-radius: 5px;	content: "";
}
.nes .center::before {	top: 0px;	border-radius: 0 0 5px 5px;
}
.nes .center::after {	top: 30px;
}
.nes .center .main-buttons {	position: absolute;	width: 100%;	height: 40px;	bottom: 20px;	border-radius: 5px;	background-color: #bdbdbd;
}
.nes .center .main-buttons::before, .nes .center .main-buttons::after {	position: absolute;	left: 0;	width: 100%;	height: 20px;	background-color: #777f82;	border-radius: 5px;	content: "";
}
.nes .center .main-buttons::before {	top: -28px;
}
.nes .center .main-buttons::after {	bottom: -28px;
}
.nes .center .main-buttons .select, .nes .center .main-buttons .start {	position: absolute;	top: 12px;	width: 36px;	height: 16px;	border-radius: 8px;	background-color: #222;	font-family: 'Nes Controller';	color: #C91515;	font-size: 14px;
}
.nes .center .main-buttons .select::before, .nes .center .main-buttons .select::after, .nes .center .main-buttons .start::before, .nes .center .main-buttons .start::after {	position: absolute;	left: 0;	top: -40px;
}
.nes .center .main-buttons .select {	left: 12px;
}
.nes .center .main-buttons .select::before {	content: "SELECT";
}
.nes .center .main-buttons .start {	right: 12px;
}
.nes .center .main-buttons .start::after {	content: "START";
}
.nes .controller-left {	height: 100%;	left: 42px;	width: 168px;
}
.nes .controller-left::after {	border-radius: 50%;	content: "";	height: 28px;	left: 61px;	position: absolute;	top: 67px;	width: 28px;	z-index: 10;
}
.nes .controller-left .d-pad {	height: 100px;	width: 100px;	position: absolute;	left: 28px;	bottom: 14px;
}
.nes .controller-left .d-pad::before, .nes .controller-left .d-pad::after {	position: absolute;	left: 29px;	top: 0;	width: 42px;	height: 100px;	background-color: #bdbdbd;	border-radius: 5px;	content: "";
}
.nes .controller-left .d-pad::after, .nes .controller-left .d-pad .left, .nes .controller-left .d-pad .right {	-webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.nes .controller-left .d-pad .down::before, .nes .controller-left .d-pad .down::after, .nes .controller-left .d-pad .left::before, .nes .controller-left .d-pad .left::after {	border-radius: 50%;	content: "";	height: 16px;	left: 6px;	position: absolute;	width: 16px;
}
.nes .controller-left .d-pad .down::before, .nes .controller-left .d-pad .left::before {	bottom: 6px;
}
.nes .controller-left .d-pad .down::after, .nes .controller-left .d-pad .left::after {	top: 6px;
}
.nes .controller-left .d-pad div {	position: absolute;	top: 7px;	left: 36px;	width: 28px;	height: 86px;	background-color: #222;	border-radius: 5px;	z-index: 10;
}
.nes .controller-right {	height: 100%;	width: 168px;	position: absolute;	right: 0;	top: 0;
}
.nes .controller-right .logo {	color: #C91515;	font-size: 21px;	left: 26px;	position: absolute;	top: 28px;	width: 112px;
}
.nes .controller-right .buttons {	position: absolute;	right: 42px;	top: 82px;	width: 112px;	height: 48px;
}
.nes .controller-right .buttons .button {	position: absolute;	height: 48px;	width: 48px;	background-color: #bdbdbd;	border-radius: 5px;
}
.nes .controller-right .buttons .button:first-child {	left: 0;
}
.nes .controller-right .buttons .button:last-child {	right: 0;
}
.nes .controller-right .buttons .button::after {	position: absolute;	top: 8px;	left: 8px;	width: 32px;	height: 32px;	border-radius: 50%;	background-color: #C91515;	content: "";
}
/*---------------------------------------------	SNES CONTROLLER
----------------------------------------------*/
.snes {	font-family: 'Lato';	height: 195px;	width: 460px;
}
.snes .controller-left, .snes .controller-right, .snes .center {	background-color: #a3a3a3;	position: absolute;
}
.snes .controller-left, .snes .controller-right {	border-radius: 50%;	height: 195px;	width: 195px;	z-index: 2;
}
.snes .controller-left {	left: 0;
}
.snes .controller-right {	right: 0;
}
.snes .d-pad {	border: 2px solid #5F6567;	border-radius: 50%;	height: 105px;	left: 44px;	position: absolute;	top: 44px;	width: 105px;	box-sizing: content-box;
}
.snes .d-pad::before {	background-color: #5F6567;	content: "";	height: 24px;	left: 41px;	position: absolute;	top: 41px;	width: 24px;
}
.snes .d-pad::after {	background-color: #474b4c;	border-radius: 50%;	content: "";	height: 18px;	left: 44px;	position: absolute;	top: 44px;	width: 18px;
}
.snes .d-pad div {	background-color: #5F6567;	border-color: transparent;	border-radius: 3px;	border-style: solid;	position: absolute;
}
.snes .d-pad div::after {	border-bottom: 14px solid #474b4c;	border-left: 7px solid transparent;	border-right: 7px solid transparent;	border-top: 7px solid transparent;	content: "";	height: 0;	position: absolute;	width: 0;
}
.snes .d-pad .up, .snes .d-pad .down {	height: 29px;	left: 40px;	width: 26px;
}
.snes .d-pad .left, .snes .d-pad .right {	height: 26px;	top: 40px;	width: 29px;
}
.snes .d-pad .up {	top: 14px;	border-width: 3px 3px 0 3px;
}
.snes .d-pad .up::after {	left: 3px;	top: -4px;
}
.snes .d-pad .down {	bottom: 14px;	border-width: 0 3px 3px 3px;
}
.snes .d-pad .down::after {	bottom: -4px;	left: 3px;	-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.snes .d-pad .left {	left: 14px;	border-width: 3px 0 3px 3px;
}
.snes .d-pad .left::after {	left: -1px;	top: 0px;	-webkit-transform: rotate(270deg); transform: rotate(270deg);
}
.snes .d-pad .right {	right: 14px;	border-width: 3px 3px 3px 0;
}
.snes .d-pad .right::after {	right: -1px;	top: 0px;	-webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.snes .center {	height: 170px;	left: 97.5px;	width: 265px;	z-index: 1;
}
.snes .select, .snes .start {	background-color: #5F6567;	border-radius: 6px;	bottom: 70px;	height: 12px;	left: 200px;	position: absolute;	width: 38px;	z-index: 11;
}
.snes .select {	-webkit-transform: translate3d(-25px, 0, 0) rotate(-38deg); transform: translate3d(-25px, 0, 0) rotate(-38deg);
}
.snes .select::after {	color: #5F6567;
}
.snes .start {	-webkit-transform: translate3d(25px, 0, 0) rotate(-38deg); transform: translate3d(25px, 0, 0) rotate(-38deg);
}
.snes .start::after {	color: #5F6567;
}
.snes .logo {	background-color: transparent;	left: 130px;	position: absolute;	top: 8px;	width: 150px;	z-index: 12;
}
.snes .logo span {	color: #5F6567;	font-size: 40px;
}
.snes .buttons {	background-color: #5F6567;	border-radius: 50%;	height: 170px;	position: absolute;	right: calc((195px - 170px) / 2);	top: calc((195px - 170px) / 2);	width: 170px;
}
.snes .buttons .button-set {	background-color: #a3a3a3;	border-radius: 22px;	height: 44px;	left: calc((170px - 100px) / 2);	position: absolute;	top: calc((170px - 44px) / 2);	-webkit-transform-origin: 0 0 0; transform-origin: 0 0 0;	width: 100px;	z-index: 1;
}
.snes .buttons .button-set:first-child {	-webkit-transform: translate3d(-26px, 18px, 0px) rotate(-38deg); transform: translate3d(-26px, 18px, 0px) rotate(-38deg);
}
.snes .buttons .button-set:last-child {	-webkit-transform: translate3d(20px, 52px, 0px) rotate(-38deg); transform: translate3d(20px, 52px, 0px) rotate(-38deg);
}
.snes .buttons .button-set .button {	border-radius: 50%;	height: 32px;	position: absolute;	top: 6px;	-webkit-transform: rotate(38deg); transform: rotate(38deg);	width: 32px;	z-index: 2;
}
.snes .buttons .button-set .button::after {	color: #a3a3a3;	font-size: 14px;	font-weight: 700;	height: 12px;	position: absolute;	width: 12px;
}
.snes .buttons .button-set .button.blue {	background-color: #041D71;	right: 6px;
}
.snes .buttons .button-set .button.blue::after {	content: "X";	right: -22px;	top: -14px;
}
.snes .buttons .button-set .button.green {	background-color: #027033;	left: 6px;
}
.snes .buttons .button-set .button.green::after {	bottom: -10px;	content: "Y";	left: -14px;
}
.snes .buttons .button-set .button.red {	background-color: #CC2112;	right: 6px;
}
.snes .buttons .button-set .button.red::after {	content: "A";	right: -18px;	top: -14px;
}
.snes .buttons .button-set .button.yellow {	background-color: #EFBA24;	left: 6px;
}
.snes .buttons .button-set .button.yellow::after {	bottom: -12px;	content: "B";	left: -18px;
}
.snes .wire {	stroke: #a3a3a3;
}
/*--------------------------------------------- N64 CONTROLLER
----------------------------------------------*/
.n64 {	background-image: url("https://app.mobiuswebdesign.co.uk/plugins/controller/_0000s_0004_N64.svg");	background-position: -1px -100px;	height: 438px;	width: 454px;
}
.n64 .d-pad {	border: 2px solid #5f6567;	border-radius: 50%;	height: 100px;	left: 40px;	position: absolute;	top: 78px;	width: 100px;
}
.n64 .d-pad::before {	background-color: #5f6567;	content: "";	height: 24px;	left: 36px;	position: absolute;	top: 36px;	width: 24px;
}
.n64 .d-pad::after {	background-color: #474b4c;	border-radius: 50%;	content: "";	height: 18px;	left: 39px;	position: absolute;	top: 39px;	width: 18px;
}
.n64 .d-pad div {	background-color: #5f6567;	border-color: transparent;	border-radius: 3px;	border-style: solid;	position: absolute;
}
.n64 .d-pad div::after {	border-color: transparent transparent #474b4c;	border-style: solid;	border-width: 7px 7px 14px;	content: "";	height: 0;	position: absolute;	width: 0;
}
.n64 .d-pad .up,
.n64 .d-pad .down {	height: 28px;	left: 36px;	width: 24px;
}
.n64 .d-pad .left,
.n64 .d-pad .right {	height: 24px;	top: 36px;	width: 28px;
}
.n64 .d-pad .up {	top: 14px;
}
.n64 .d-pad .up::after {	left: 2px;	top: -5px;
}
.n64 .d-pad .down {	border-width: 0 3px 3px;	bottom: 14px;
}
.n64 .d-pad .down::after {	bottom: -5px;	left: 2px;	-webkit-transform: rotate(180deg); transform: rotate(180deg);
}
.n64 .d-pad .left {	border-width: 3px 0 3px 3px;	left: 14px;
}
.n64 .d-pad .left::after {	left: -2px;	top: -1px;	-webkit-transform: rotate(270deg); transform: rotate(270deg);
}
.n64 .d-pad .right {	border-width: 3px 3px 3px 0;	right: 14px;
}
.n64 .d-pad .right::after {	right: -2px;	top: -1px;	-webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.n64 .controller-left,
.n64 .controller-center,
.n64 .controller-right {	height: 100%;	position: absolute;	top: 0;	width: 151px;
}
.n64 .controller-left {	left: 0;
}
.n64 .controller-center {	left: 151px;
}
.n64 .controller-right {	right: 0;
}
.n64 .controller-right > .buttons-left::before {	background-color: #474b4c;	content: "";	height: 5px;	left: 12px;	position: absolute;	top: 36px;	-webkit-transform: rotate(45deg); transform: rotate(45deg);	width: 50px;
}
.n64 .controller-center::before,
.n64 .controller-center::after {	border-style: solid solid solid solid;	content: "";	height: 0;	position: absolute;	top: 0;	width: 0;
}
.n64 .controller-center::before {	top: 18px;	left: -18px;	border-color: transparent #5f6567 transparent transparent;	border-width: 14px 12px 78px 10px;	-webkit-transform: rotate(-10deg); transform: rotate(-10deg);
}
.n64 .controller-center::after {	top: 18px;	right: -18px;	border-color: transparent transparent transparent #5f6567;	border-width: 14px 12px 78px 10px;	-webkit-transform: rotate(10deg); transform: rotate(10deg);
}
.n64 .controller-center > .logo {	color: #5f6567;	font-size: 36px;	left: 0;	position: absolute;	text-align: center;	top: 30px;	width: 100%;
}
.n64 .controller-center > .start {	position: absolute;	width: 32px;	height: 32px;	top: 124px;	left: 59.5px;	background-color: #be0022;	border-radius: 50%;
}
.n64 .controller-center > .stick-container {	position: absolute;	width: 96px;	height: 96px;	top: 190px;	left: 27.5px;	background-color: #5f6567;	border-radius: 50%;
}
.n64 .controller-center > .stick-container > .stick {	position: absolute;	width: 44px;	height: 44px;	top: 26px;	left: 26px;	background-color: #c2c3c7;	border-radius: 50%;	z-index: 1;
}
.n64 .controller-center > .stick-container::before,
.n64 .controller-center > .stick-container::after {	background-color: #474b4c;	border-radius: 5px;	content: "";	height: 40px;	left: 28px;	position: absolute;	top: 28px;	width: 40px;
}
.n64 .controller-center > .stick-container::before {	-webkit-transform: rotate(45deg); transform: rotate(45deg);
}
.n64 .controller-center > .stick-container::after {	-webkit-transform: rotate(90deg); transform: rotate(90deg);
}
.n64 .controller-right > .buttons-left {	position: absolute;	top: 122px;	right: 82px;	width: 74px;	height: 74px;
}
.n64 .controller-right > .buttons-left > .button {	position: absolute;	width: 40px;	height: 40px;	border-radius: 50%;
}
.n64 .controller-right > .buttons-left > .button:nth-child(1) {	top: 0px;	left: 0px;	background-color: #249459;
}
.n64 .controller-right > .buttons-left > .button:nth-child(2) {	bottom: 0px;	right: 0px;	background-color: #0055b0;
}
.n64 .controller-right > .buttons-right {	position: absolute;	top: 80px;	right: 30px;	width: 74px;	height: 74px;
}
.n64 .controller-right > .buttons-right::before {	border: 2px solid #5f6567;	border-radius: 50%;	content: "";	height: 54px;	left: 8px;	position: absolute;	top: 8px;	width: 54px;	z-index: 0;
}
.n64 .controller-right > .buttons-right > .button {	background-color: #ffc100;	border-radius: 50%;	height: 24px;	position: absolute;	width: 24px;
}
.n64 .controller-right > .buttons-right > .button:nth-child(1),
.n64 .controller-right > .buttons-right > .button:nth-child(3) {	left: 25px;
}
.n64 .controller-right > .buttons-right > .button:nth-child(1) {	top: 0;
}
.n64 .controller-right > .buttons-right > .button:nth-child(3) {	bottom: 0;
}
.n64 .controller-right > .buttons-right > .button:nth-child(2),
.n64 .controller-right > .buttons-right > .button:nth-child(4) {	top: 25px;
}
.n64 .controller-right > .buttons-right > .button:nth-child(2) {	left: 0;
}
.n64 .controller-right > .buttons-right > .button:nth-child(4) {	right: 0;
}

Pure CSS Nintendo Controllers - Script Codes JS Codes

window.requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame||function(a){return setTimeout(a,1e3/60)},window.cancelAnimationFrame=window.cancelAnimationFrame||window.mozCancelAnimationFrame||function(a){clearTimeout(a)},function(a,b){var c="Gallery";"function"==typeof define&&define.amd?define([],b(c)):"object"==typeof exports?module.exports=b(c):a[c]=b(c)}(this,function(a){"use strict";function f(a,c){var e={wrapperClass:"gallery-wrapper",overflow:"hidden",controls:!0,duration:500,rewind:!1,autoplay:!0,interval:5e3,move:function(){},stop:function(){}};this.element=a,this.items=this.element.children,this.options=b(e,c),this.translateX=0,this.limit=0,this.active=0,this.starttime=null,this.itemsCount=this.items.length,this.animFrame=null,this.autoInt=null,this.initialise()}var b=function(a,b){var c;for(c in b)b.hasOwnProperty(c)&&(a[c]=b[c]);return a},c=function(a,b){var c,d=document.createElement(a);if(b)for(c in b)d.setAttribute(c,b[c]);return d},d=function(a,b,c){if("[object Object]"===Object.prototype.toString.call(a))for(var d in a)Object.prototype.hasOwnProperty.call(a,d)&&b.call(c,d,a[d],a);else for(var e=0,f=a.length;e<f;e++)b.call(c,e,a[e],a)};return f.prototype={initialise:function(){var a=this,b=c("div",{class:this.options.wrapperClass});if(this.setStyle(this.element,{transform:"translate3d("+a.translateX+"px,0,0)"}),this.items[0].classList.add("active"),this.element.parentElement.appendChild(b),b.appendChild(this.element),this.options.controls){var e=document.createDocumentFragment(),f=c("button",{type:"button",class:"gallery-navigation prev inactive"}),g=c("button",{type:"button",class:"gallery-navigation next"});e.appendChild(f),e.appendChild(g),b.appendChild(e),this.prevButton=f,this.nextButton=g}this.wrapper=b,null==this.options.width&&(this.options.width=this.wrapper.parentElement.clientWidth),null==this.options.height&&(this.options.height=this.wrapper.parentElement.clientHeight),this.setStyle(this.wrapper,{width:this.options.width+"px",height:this.options.height+"px",overflow:this.options.overflow}),d(this.items,function(b,c){a.setStyle(c,{width:a.options.width+"px",height:a.options.height+"px"}),c.classList.add("gallery-item")}),this.limit=this.options.width*this.items.length,this.addEventListeners(),this.options.autoplay&&(this.autoInt=setInterval(function(){a.next()},this.options.interval)),this.initialised=!0},update:function(){var a=this;this.setStyle(this.wrapper,{width:this.options.width+"px",height:this.options.height+"px",overflow:this.options.overflow}),this.setStyle(this.element,{transform:"translate3d("+a.translateX+"px,0,0)"}),d(this.items,function(b,c){a.setStyle(c,{width:a.options.width+"px",height:a.options.height+"px"}),c.classList.add("gallery-item")}),this.limit=this.options.width*this.items.length},addEventListeners:function(){var a=this;this.options.controls&&(this.prevButton.addEventListener("click",function(b){a.prev()}),this.nextButton.addEventListener("click",function(b){a.next()})),document.addEventListener("keydown",function(b){var c=b.which;if(37!=c&&39!=c)return!1;switch(b.preventDefault(),c){case 39:a.next();break;case 37:a.prev()}})},next:function(){if(null==this.animFrame){if(this.translateX==-(this.limit-this.options.width))return void(this.options.rewind&&this.rewind());var a=this;this.items[this.active].classList.remove("active"),this.active+=1,this.options.move(this),this.animFrame=requestAnimationFrame(function(b){a.starttime=b||(new Date).getTime(),a.move(b,a.options.width,a.options.duration,"next")})}},prev:function(){if(null==this.animFrame){if(0==this.translateX)return void(this.options.rewind&&this.fastForward());var a=this;this.items[this.active].classList.remove("active"),this.active-=1,this.options.move(this),this.animFrame=requestAnimationFrame(function(b){a.starttime=b||(new Date).getTime(),a.move(b,a.options.width,a.options.duration,"prev")})}},rewind:function(){var a=this;this.options.move(this),this.animFrame=requestAnimationFrame(function(b){a.starttime=b||(new Date).getTime(),a.move(b,-a.translateX,a.options.duration,"rewind")}),this.active=0},fastForward:function(){var a=this,b=-(this.options.width*(this.itemsCount-1));this.options.move(this),this.animFrame=requestAnimationFrame(function(c){a.starttime=c||(new Date).getTime(),a.move(c,b,a.options.duration,"fastForward")}),this.active=this.itemsCount-1},move:function(a,b,c,d){var e=this,a=a||(new Date).getTime(),f=a-this.starttime,g=f/c;g=Math.min(g,1);var h="next"==d?(this.translateX-b*g).toFixed(2):(this.translateX+b*g).toFixed(2);if(this.setStyle(this.element,{transform:"translate3d("+h+"px,0,0)"}),f<c)requestAnimationFrame(function(a){e.move(a,b,c,d)});else{switch(d){case"next":this.translateX-=this.options.width;break;case"prev":this.translateX+=this.options.width;break;case"rewind":this.translateX=0;break;case"fastForward":this.translateX=-(this.options.width*(this.itemsCount-1))}this.animFrame=null,this.setClasses(),this.options.stop(this)}},setClasses:function(){var a=this;d(this.items,function(b,c){a.setStyle(c,{transition:"transform "+a.options.duration+"ms, filter "+a.options.duration+"ms"}),b==a.active?c.classList.add("active"):c.classList.remove("active")}),this.options.controls&&(0==this.active?this.prevButton.classList.add("inactive"):this.prevButton.classList.remove("inactive"),this.active==this.itemsCount-1?this.nextButton.classList.add("inactive"):this.nextButton.classList.remove("inactive"))},setStyle:function(a,b){var d,c="";for(d in b)c+=d+": "+b[d]+";",c+=this.vendorPrefix+d+": "+b[d]+";";a.style.cssText+=c}},f});
var element = document.getElementById('gallery');
var gallery = new Gallery(element, { overflow: 'visible', autoplay: false, duration: 250, width: 800, height: 500, rewind: true, move: function() { console.log('Moving...'); }, stop: function() { console.log('Stopped.') }
});
Pure CSS Nintendo Controllers - Script Codes
Pure CSS Nintendo Controllers - Script Codes
Home Page Home
Developer Karl Saunders
Username Mobius1
Uploaded November 20, 2022
Rating 3
Size 8,691 Kb
Views 8,096
Do you need developer help for Pure CSS Nintendo Controllers?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Karl Saunders (Mobius1) Script Codes
Name
DVD Screensaver
Solitaire Win Animation
CRT TV Effect
A Pen by Karl Saunders
Pure CSS Glitchy Text
Vanilla DataTables Demo
Pure CSS Windows Loader
Selectable
Static vs. Live NodeList
Vanilla DataTables - AJAX
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!