Skeuomorphic Toggle Buttons Using CSS

Skeuomorphic Toggle Buttons Using CSS
Code Snippet:Skeuomorphic Setting Switches
Author: Jon Kantner
Published: January 5, 2024
Last Updated: January 5, 2024
Downloads: 242
License: MIT
Edit Code online: View on CodePen
Read More

This code creates toggle buttons styled with CSS. It switches ON/OFF states for various settings. Using checkboxes, it simulates toggle switches for different options. This design helps manage and visually toggle settings like comments, newsletters, and tips without using default switches.

You can use this code on websites needing stylish toggle buttons. It offers a sleek way to control settings visually.

How to Create Skeuomorphic Toggle Buttons Using Css

1. Start with the HTML structure. Wrap each toggle switch in a <label> tag containing a <span> for the label text and a structure for the switch itself, using <input> and <span> elements. Modify the labels within the <span class="setting__label"> to suit your settings.

<form>
	<label class="setting">
		<span class="setting__label">Comments</span>
		<span class="switch">
			<input class="switch__input" type="checkbox" role="switch" name="switch1">
			<span class="switch__fill" aria-hidden="true">
				<span class="switch__text">ON</span>
				<span class="switch__text">OFF</span>
			</span>
		</span>
	</label>
	<label class="setting">
		<span class="setting__label">Newsletters</span>
		<span class="switch">
			<input class="switch__input" type="checkbox" role="switch" name="switch2">
			<span class="switch__fill" aria-hidden="true">
				<span class="switch__text">ON</span>
				<span class="switch__text">OFF</span>
			</span>
		</span>
	</label>
	<label class="setting">
		<span class="setting__label">Tips</span>
		<span class="switch">
			<input class="switch__input" type="checkbox" role="switch" name="switch3" checked>
			<span class="switch__fill" aria-hidden="true">
				<span class="switch__text">ON</span>
				<span class="switch__text">OFF</span>
			</span>
		</span>
	</label>
</form>

2. Apply CSS styles to customize the appearance of the toggle switches. The following CSS code includes styles for the switches, labels, and their animations.

* {
	border: 0;
	box-sizing: border-box !important;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--hue-success: 103;
	--bg: hsl(var(--hue),10%,80%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,50%);
	--primary-t: hsla(var(--hue),90%,50%,0);
	--trans-dur: 0.3s;
	--trans-timing: cubic-bezier(0.65,0,0.35,1);
	font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320));
}


body, 
input {
	font: 1em/1.5 "DM Sans", sans-serif;
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	height: 100vh;
}
form {
	background-color: hsl(var(--hue),10%,90%);
	border-radius: 0.25em;
	box-shadow: 0 0.25em 0.25em hsla(var(--hue),10%,10%,0.4);
	margin: auto;
	width: calc(100% - 3em);
	max-width: 20em;
}
.setting {
	box-shadow:
		0 0.125em 0 hsl(var(--hue),10%,100%) inset,
		0 -0.125em 0 hsl(var(--hue),10%,75%) inset;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75em 1em;
}
.setting:only-child {
	border-radius: 0.25em;
}
.setting:first-child {
	border-radius: 0.25em 0.25em 0 0;
}
.setting:last-child {
	border-radius: 0 0 0.25em 0.25em;
}
.setting__label {
	margin-right: 1em;
}
.setting,
.switch__input {
	-webkit-tap-highlight-color: transparent;
}
.switch,
.switch:before,
.switch:after {
	display: block;
}
.switch {
	background-image: linear-gradient(hsl(var(--hue),10%,60%),hsl(var(--hue),10%,95%));
	box-shadow: 0 0 0.125em 0.125em hsl(var(--hue),10%,90%) inset;
	border-radius: 1em;
	flex-shrink: 0;
	position: relative;
	width: 5em;
	height: 2em;
}
.switch:before,
.switch:after {
	border-radius: 0.75em;
	content: "";
	position: absolute;
	top: 0.25em;
	left: 0.25em;
	width: 4.5em;
	height: 1.5em;
}
.switch:before {
	background-color: hsl(var(--hue),10%,60%);
}
.switch::after {
	box-shadow: 0 0 0.5em hsl(var(--hue),10%,20%) inset;
	z-index: 1;
}
.switch__fill {
	border-radius: 0.75em;
	overflow: hidden;
	position: absolute;
	top: 0.25em;
	right: 0;
	left: 0.25em;
	width: 4.5em;
	height: 1.5em;
	z-index: 1;
}
.switch__input {
	border-radius: 1em;
	box-shadow: 0 0 0 0.125em var(--primary-t);
	cursor: pointer;
	outline: transparent;
	position: relative;
	width: 100%;
	height: 100%;
	transition: box-shadow calc(var(--trans-dur) / 2) var(--trans-timing);
	z-index: 2;
	-webkit-appearance: none;
	appearance: none;
}
.switch__input:focus-visible {
	box-shadow: 0 0 0 0.125em var(--primary);
}
.switch__input:before,
.switch__input:after {
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__input:before {
	background-image: linear-gradient(hsl(0,0%,100%),hsl(var(--hue),10%,60%));
	box-shadow:
		0 0 0.125em 0.0625em hsl(var(--hue),10%,40%),
		0 0.25em 0.25em hsla(var(--hue),10%,10%,0.4);
	top: 0.125em;
	left: 0.125em;
	width: 1.75em;
	height: 1.75em;
}
.switch__input:after {
	background-image: linear-gradient(hsl(var(--hue),10%,90%),hsl(var(--hue),10%,80%));
	top: 0.25em;
	left: 0.25em;
	width: 1.5em;
	height: 1.5em;
}
.switch__text {
	background-color: hsl(var(--hue-success),90%,50%,0.5);
	color: hsl(var(--hue-success),90%,10%);
	display: block;
	font-size: 0.75em;
	font-weight: 700;
	line-height: 2;
	opacity: 0.6;
	padding: 0 0.75em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-shadow: 0 0.0625rem 0 hsl(var(--hue-success),90%,55%);
	transform: translateX(-4.25em);
	transition: transform var(--trans-dur) var(--trans-timing);
	z-index: -1;
}
.switch__text + .switch__text {
	background-color: hsla(0,0%,0%,0);
	color: hsl(var(--hue),10%,10%);
	text-shadow: 0 0.0625rem 0 hsl(var(--hue),10%,75%);
	text-align: right;
	transform: translateX(0);
}
.switch__input:checked:before,
.switch__input:checked:after {
	transform: translateX(3em);
}
.switch__input:checked + .switch__fill .switch__text {
	transform: translateX(0);
}
.switch__input:checked + .switch__fill .switch__text + .switch__text {
	transform: translateX(4em);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,20%);
		--fg: hsl(var(--hue),10%,90%);
		--primary: hsl(var(--hue),90%,70%);
		--primary-t: hsla(var(--hue),90%,70%,0);
	}
	form {
		background-color: hsl(var(--hue),10%,30%);
	}
	.setting {
		box-shadow:
			0 0.125em 0 hsl(var(--hue),10%,40%) inset,
			0 -0.125em 0 hsl(var(--hue),10%,20%) inset;
	}
	.switch {
		background-image: linear-gradient(hsl(var(--hue),10%,15%),hsl(var(--hue),10%,35%));
		box-shadow: 0 0 0.125em 0.125em hsl(var(--hue),10%,30%) inset;
	}
	.switch:before {
		background-color: hsl(var(--hue),10%,40%);
	}
	.switch:after {
		box-shadow: 0 0 0.5em hsl(0,0%,0%) inset;
	}
	.switch__input:before {
		background-image: linear-gradient(hsl(var(--hue),10%,50%),hsl(var(--hue),10%,20%));
		box-shadow:
			0 0 0.125em 0.0625em hsl(var(--hue),10%,10%),
			0 0.25em 0.25em hsla(var(--hue),10%,10%,0.4);
	}
	.switch__input:after {
		background-image: linear-gradient(hsl(var(--hue),10%,40%),hsl(var(--hue),10%,30%));
	}
	.switch__text {
		text-shadow: 0 0.0625rem 0 hsl(var(--hue-success),90%,45%);
	}
	.switch__text + .switch__text {
		color: hsl(var(--hue),10%,10%);
		text-shadow: 0 0.0625rem 0 hsl(var(--hue),10%,55%);
	}
}

Adjust the colors, sizes, or animations by modifying the variables in the CSS code, such as hue, background, or text colors. Ensure the toggle buttons are accessible by adding appropriate roles and labels.

Easily integrate these buttons into any web page where stylish toggle switches are needed.

That’s all! hopefully, you have successfully created Skeuomorphic Toggle Buttons Using CSS. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...