CSS Super Nintendo Controller

Developer
Bryan Smith
Size
3,374 Kb
Views
30,360
  1. CSS Super Nintendo Controller Previews
  2. CSS Super Nintendo Controller HTML Codes
  3. CSS Super Nintendo Controller CSS Codes

How do I make an css super nintendo controller?

The beginning of my super nintendo controller. just for fun.. What is a css super nintendo controller? How do you make a css super nintendo controller? This script and codes were developed by Bryan Smith on 21 November 2022, Monday.

CSS Super Nintendo Controller Previews
IQ Test

CSS Super Nintendo Controller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Super Nintendo Controller</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="controller"> <div class="leftCircle"> <div class="innerCircle"> <button class="dPad"></button> </div> </div> <div class="middle"> <div class="superNintendo">super nintendo</div> <button class="select"></button> <span class="buttonText selectButton">select</span> <button class="start"></button> <span class="buttonText startButton">start</span> </div> <div class="rightCircle"> <div class="buttonCircle"> <div class="buttonHolder"> <button class="buttons y"></button> <button class="buttons x"></button> </div> <div class="buttonHolder bottom"> <button class="buttons b"></button> <button class="buttons a"></button> </div> </div> </div>
</div>
</body>
</html>

CSS Super Nintendo Controller - Script Codes CSS Codes

body { display: flex; justify-content: center; font-family: Arial; color: #b1b1b1;
}
.leftCircle,
.middle,
.rightCircle { background: #dfdfdf;
}
.leftCircle,
.rightCircle { height: 250px; width: 250px; position: absolute; border-radius: 50%; z-index: 2;
}
.controller { position: relative; width: 600px;
}
.controller .leftCircle { left: 0;
}
.controller .leftCircle .innerCircle { height: 145px; width: 145px; border: 2px solid #eee; border-radius: 50%; position: absolute; left: 50px; top: 50px;
}
.controller .leftCircle .innerCircle .dPad { height: 40px; width: 120px; background: #000; border-radius: 5px; position: absolute; top: 53px; left: 12px; box-shadow: 0px 2px 0px #b1b1b1; border: none; cursor: pointer;
}
.controller .leftCircle .innerCircle .dPad:before { content: ''; height: 120px; width: 40px; background: #000; position: absolute; top: -42px; left: 42px; border-radius: 5px;
}
.controller .leftCircle .innerCircle .dPad:active { box-shadow: none;
}
.controller .leftCircle .innerCircle .dPad:focus { outline: none;
}
.controller .middle { height: 200px; width: 380px; position: absolute; top: 1px; left: 50%; margin-left: -190px;
}
.controller .middle .superNintendo { position: absolute; top: 10px; left: 100px; text-transform: uppercase; font-size: 18px; font-style: italic;
}
.controller .middle .select,
.controller .middle .start { height: 35px; background: #000; border-radius: 8px; position: absolute; transform: rotate(45deg); border: none; box-shadow: 0px 2px 0px #b1b1b1; cursor: pointer;
}
.controller .middle .select:active,
.controller .middle .start:active { box-shadow: none;
}
.controller .middle .select:focus,
.controller .middle .start:focus { outline: none;
}
.controller .middle .select { left: 155px; top: 120px;
}
.controller .middle .start { left: 200px; top: 120px;
}
.controller .middle span.buttonText { cursor: default; text-transform: uppercase; position: absolute; z-index: 3; font-size: 10px;
}
.controller .middle .selectButton { left: 145px; bottom: 30px;
}
.controller .middle .startButton { left: 195px; bottom: 30px;
}
.controller .rightCircle { right: 0;
}
.controller .rightCircle .buttonCircle { height: 220px; width: 220px; border-radius: 50%; background: #b1b1b1; position: absolute; right: 14px; top: 14px;
}
.controller .rightCircle .buttonCircle .buttonHolder { height: 50px; width: 145px; background: #dfdfdf; position: absolute; border-radius: 50px; top: 50px; right: 53px; transform: rotate(-30deg);
}
.controller .rightCircle .buttonCircle .buttonHolder .buttons { height: 40px; width: 40px; background: #bdbae5; border-radius: 50%; position: absolute; box-shadow: 0px 2px 0px #b1b1b1; border: none; cursor: pointer;
}
.controller .rightCircle .buttonCircle .buttonHolder .buttons:active { box-shadow: none;
}
.controller .rightCircle .buttonCircle .buttonHolder .buttons:focus { outline: none;
}
.controller .rightCircle .buttonCircle .buttonHolder .y { top: 5px; right: 5px;
}
.controller .rightCircle .buttonCircle .buttonHolder .x { bottom: 5px; left: 5px;
}
.controller .rightCircle .buttonCircle .bottom { top: 110px; right: 18px;
}
.controller .rightCircle .buttonCircle .bottom .a { top: 5px; right: 5px; background: #6650B4;
}
.controller .rightCircle .buttonCircle .bottom .b { bottom: 5px; left: 5px; background: #6650B4;
}
CSS Super Nintendo Controller - Script Codes
CSS Super Nintendo Controller - Script Codes
Home Page Home
Developer Bryan Smith
Username beeg
Uploaded November 21, 2022
Rating 4
Size 3,374 Kb
Views 30,360
Do you need developer help for CSS Super Nintendo Controller?

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!

Bryan Smith (beeg) Script Codes
Name
Gradient Text
JSWatch
User login
Credit Card Wallet
CSS only animated skills
Clip Path Sunset
Angular Christmas List
A Pen by Bryan Smith
Sudoku Validator
Customer Checkout
Create amazing marketing copy 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!