Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a skeuomorphism UI button. To build this button, we need HTML, CSS and Javascript. The term skeuomorphism refers to using design cues that represent real-world objects.
To implement this in graphical terms, we make use of soft shadows. These shadows define highlights and depths to mimic real-world objects.
If you are looking for more interesting projects like this one to improve your CSS skills, you can check out this playlist here. This playlist consists of 50+ tutorials that will help you enhance your CSS skills.
Video Tutorial:
If you are interested to learn through a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tips, tricks and tutorials regularly.
Project Folder Structure:
Before we start coding, we take a look at the project folder structure. We create a project folder called – the ‘Skeuomorphism UI button’. Within this folder, we have two files. These files are index.html and style.css. The first file is the HTML document, while the second one is the stylesheet.
HTML:
We begin with the HTML code. Copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Skeuomorphism Button</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container" id="container">
<div>
<input type="radio" id="on" name="switch" />
<label for="on">ON</label>
</div>
<div>
<input type="radio" id="off" name="switch" default />
<label for="off">OFF</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we apply styles and the real-world look to the button using box shadows. For this we use CSS. Now copy the code below and paste it into your stylesheet.
body {
padding: 0;
margin: 0;
}
.container {
font-family: "Poppins", sans-serif;
height: 6.25em;
width: 12.5em;
background: linear-gradient(to right, #4b4b4b, #111111);
border-radius: 12.5em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: inset 0.9em 0 0.9em #171717;
display: flex;
align-items: center;
justify-content: space-around;
transition: 0.3s;
}
input[type="radio"] {
appearance: none;
background-color: transparent;
border: none;
outline: none;
}
label {
font-size: 1.2em;
letter-spacing: 0.1em;
transition: 0.3s;
cursor: pointer;
}
@media screen and (min-width: 600px) {
.container {
font-size: 1.5em;
}
}
That’s it for this tutorial. You can go ahead and experiment with different values and shapes to get different results. If you face any issues while creating this code you can download the source code by clicking on the download code button below. Also if you have any queries, suggestions or feedback comment below.
Happy Coding!
