Are you looking to add a unique and playful touch to your website? In this tutorial, we’ll show you how to create a fun and interactive toggle switch that looks like a toilet paper roll using pure CSS. This quirky design element can make your web projects stand out and engage your users in a delightful way.
What You Will Learn
In this article, you will learn:
- The basics of creating a toggle switch with HTML and CSS.
- How to use CSS transitions and transformations to create smooth animations.
- Tips for making your toggle switch visually appealing and functional.
Why a Toilet Paper Roll Toggle Switch?
Toggle switches are a common UI element used to represent on/off states. However, most toggle switches look pretty standard and uninspiring. By transforming a simple toggle switch into a toilet paper roll, you can add a touch of humor and creativity to your site. This design not only catches the eye but also provides a memorable user experience.
Step-by-Step Guide
1. Setting Up Your HTML Structure
First, you’ll need a basic HTML structure to hold your toggle switch. This involves creating a checkbox input and a label that will act as the switch. The label will contain a span element, which will be styled to look like the toilet paper roll.
2. Styling with CSS
Using CSS, you’ll style the toggle switch to resemble a toilet paper roll. This includes setting the dimensions, colors, and applying various CSS properties to achieve the desired look. You’ll also add transitions to make the toggle switch animation smooth and responsive.
3. Adding Interactivity
CSS allows you to create interactive elements without the need for JavaScript. By using the :checked pseudo-class, you can change the appearance of the toggle switch when it is clicked. This will give the effect of the toilet paper roll being used.
4. Final Touches
To ensure your toggle switch is not only visually appealing but also user-friendly, you’ll add finishing touches such as shadows, gradients, and other decorative elements. These small details can make a big difference in the overall look and feel of your toggle switch.
Copy the Code
To get started with your own toilet paper roll toggle switch, you can copy the code below and customize it to fit your needs. This code is easy to integrate into any web project and can be modified to match your site’s design.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Toggle Switch</title>
<style>
:root {
--sz: 10vmin;
--tr: all 0.5s ease 0s;
}
* {
box-sizing: border-box;
transition: var(--tr);
}
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(205deg, #5c6279, #2d303b);
}
.toggle {
position: relative;
width: calc(var(--sz)* 4);
height: calc(var(--sz)* 2);
display: flex;
align-items: center;
justify-content: center;
filter: drop-shadow(-2px 2px 4px #0003);
}
.toggle:before {
content: "";
position: absolute;
width: 2vmin;
top: 4vmin;
height: calc(100% - 4vmin);
background: #fff;
left: -1.9vmin;
clip-path: polygon(0% 0%, 18% 8%, 2% 39%, 21% 80%, 2% 90%, 15% 105%, 100% 100%, 100% 0%);
}
.toggle:after {
content: "";
position: absolute;
width: 0.2vmin;
top: 4vmin;
left: 12.25vmin;
height: calc(100% - 4vmin);
background: repeating-linear-gradient(180deg, #ccc6 0 0.8vmin, #fff calc(0.8vmin + 1px) calc(0.8vmin + 2px));
}
input {
display: none;
}
label[for=btn] {
position: absolute;
width: calc(var(--sz)* 4);
height: calc(var(--sz)* 2);
background: linear-gradient(90deg, #fff 30%, #fff0 30%);
background-size: 100% calc(100% - 4vmin);
background-repeat: no-repeat;
background-position: 0 4vmin;
transition: background-size 0.5s ease 0s;
}
#btn:checked + label {
background-size: 260% calc(100% - 4vmin);
}
label[for=btn]:before, label[for=btn]:after {
content: "ON";
position: absolute;
width: 50%;
text-align: center;
height: 100%;
line-height: 23vmin;
font-size: 8vmin;
font-family: Arial, Helvetica, serif;
transform: scaleY(1.1);
padding: 0 2vmin;
color: #9acd32;
text-shadow: 0 1px 2px #0008, 0 -2px 1px #eee;
}
label[for=btn]:after {
content: "OFF";
right: 0.5vmin;
padding: 0;
color: #292929cc;
text-shadow: 0 -2px 2px #0008, 0 1px 2px #fff4;
z-index: -10;
text-align: right;
}
.thumb {
position: absolute;
width: calc(calc(var(--sz)* 2) - calc(var(--sz) / 3));
height: calc(calc(var(--sz)* 2) - calc(var(--sz) / 30));
top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -1.65));
left: calc(calc(var(--sz) / 3) + calc(var(--sz) / 50));
top: calc(calc(var(--sz) / 10) + calc(var(--sz) / -15));
left: calc(calc(var(--sz) / 10) + calc(var(--sz)* 0.35));
background: repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), repeating-conic-gradient(from -90deg at 0.15vmin 90%, #d3d5de80 0 25%, #fff0 0 100%), #fff;
border-radius: 50% 50% 50% 50% / 15% 15% 15% 15%;
box-shadow: calc(var(--sz)* -0.35) calc(var(--sz)* 0.35) calc(var(--sz) / 30) 0 #0004;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
overflow: hidden;
background-repeat: repeat-y, repeat-y, repeat-y, no-repeat;
background-size: 50% 1vmin, 50% 1vmin, 50% 1vmin, 100% 100%;
background-position: -90% 0, 5% 0, 185% 0, 0 0;
}
#btn:checked + label .thumb {
transition: var(--tr);
left: calc(calc(100% - calc(calc(var(--sz)* 2) - calc(var(--sz) / 3))) - calc(calc(var(--sz) / 10) + calc(var(--sz)* -0.075)));
background-position: 150% 0, 150% 0, 285% 0, 0 0;
}
.thumb:before {
content: "";
position: absolute;
width: 100%;
height: 25%;
background: radial-gradient(ellipse at 50% 50%, #999696 2.75vmin, #fff0 calc(2.75vmin + 2px) 100%), #d3d5de;
border-radius: 100%;
bottom: 0;
}
</style>
</head>
<body>
<div class="toggle">
<input type="checkbox" id="btn">
<label for="btn">
<span class="thumb"></span>
</label>
</div>
</body>
</html>