Padlock Toggle Switch in CSS

Padlock Toggle Switch in CSS
Code Snippet:Padlock Toggle Switch
Author: Jon Kantner
Published: March 31, 2024
Last Updated: March 31, 2024
Downloads: 295
License: MIT
Edit Code online: View on CodePen
Read More

This code creates a toggle switch resembling a padlock using HTML and CSS. The switch changes its appearance when toggled. It helps add interactive switches to web pages.

You can use this code on websites or web applications to enhance user experience. It provides an interactive way for users to toggle options. Additionally, it adds visual appeal and functionality to your website’s design.

How to Create Padlock Toggle Switch In Css

1. Begin by setting up the basic HTML structure for the toggle switch. Use the <label>, <input>, and <span> elements to create the switch components.

<label class="switch">
	<span class="switch__wrapper">
		<input class="switch__input" type="checkbox" role="switch">
		<span class="switch__handle">
			<span class="switch__handle-top"></span>
			<span class="switch__handle-side"></span>
			<span class="switch__handle-bottom"></span>
			<span class="switch__handle-bottom"></span>
			<span class="switch__handle-bottom">
				<span class="switch__keyhole"></span>
			</span>
		</span>
	</span>
	<span class="switch__label">Power</span>
</label>

2. Next, apply CSS styles to design the toggle switch. Customize colors, shadows, and transitions to achieve the desired look and feel.

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --primary: hsl(var(--hue),90%,50%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280));
}

body,
input {
  font: 1em/1.5 sans-serif;
}

body {
  background-color: var(--bg) !important;
  color: var(--fg);
  display: flex;
  height: 100vh;
  transition: background-color var(--trans-dur), color var(--trans-dur);
}

.switch {
  display: flex;
  align-items: center;
  margin: auto;
}
.switch, .switch__input {
  -webkit-tap-highlight-color: transparent;
}
.switch__handle, .switch__input, .switch__wrapper {
  display: block;
}
.switch__handle {
  filter: drop-shadow(0 0.0625em rgba(0, 0, 0, 0.15));
  pointer-events: none;
  top: 0.1875em;
  left: 0.1875em;
  width: 1.125em;
  height: 1.125em;
  transform-style: preserve-3d;
  perspective: 19.5em;
}
[dir=rtl] .switch__handle {
  right: 0.1875em;
  left: auto;
}
.switch__handle, .switch__handle-top, .switch__handle-bottom, .switch__handle-side {
  position: absolute;
}
.switch__handle-top, .switch__handle-bottom {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.switch__handle-top {
  box-shadow: 0 0 0 0.25em hsl(var(--hue), 10%, 90%) inset;
  clip-path: polygon(0 0, 100% 0, 100% calc(50% + 1px), 0 calc(50% + 1px));
}
.switch__handle-bottom, .switch__handle-side {
  background-color: white;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__handle-bottom {
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  transform: rotateY(0) translateZ(-0.125em);
  transform-origin: calc(100% - 0.125em) 0;
}
[dir=rtl] .switch__handle-bottom {
  transform-origin: 0.125em 0;
}
.switch__handle-bottom ~ .switch__handle-bottom {
  transform: rotateY(0) translateZ(0.125em);
}
.switch__handle-side {
  display: block;
  top: 50%;
  left: 0.875em;
  width: 0.25em;
  height: 50%;
  transform: rotateY(-90deg) translateZ(0.4375em);
}
[dir=rtl] .switch__handle-side {
  right: 0.875em;
  left: auto;
  transform: rotateY(90deg) translateZ(0.4375em);
}
.switch__input {
  background-color: white;
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0) 49%, rgba(0, 0, 0, 0.2) 50%);
  border-radius: 0.75em;
  cursor: pointer;
  position: relative;
  width: 2.375em;
  height: 1.5em;
  -webkit-appearance: none;
  appearance: none;
}
.switch__input, .switch__input:before {
  transition: background-color var(--trans-dur);
}
.switch__input:before {
  background-color: hsl(var(--hue), 10%, 80%);
  border-radius: 0.625em;
  box-shadow: 0 0.0625em 0 rgba(0, 0, 0, 0.15) inset;
  content: "";
  display: block;
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 2.125em;
  height: 1.25em;
  transition-timing-function: var(--trans-timing);
}
.switch__input:checked + .switch__handle .switch__handle-bottom {
  transform: rotateY(180deg) translateZ(-0.125em);
}
[dir=rtl] .switch__input:checked + .switch__handle .switch__handle-bottom {
  transform: rotateY(-180deg) translateZ(-0.125em);
}
.switch__input:checked + .switch__handle .switch__handle-bottom ~ .switch__handle-bottom {
  transform: rotateY(180deg) translateZ(0.125em);
}
[dir=rtl] .switch__input:checked + .switch__handle .switch__handle-bottom ~ .switch__handle-bottom {
  transform: rotateY(-180deg) translateZ(0.125em);
}
.switch__input:checked + .switch__handle .switch__handle-bottom:last-child {
  backface-visibility: hidden;
}
.switch__input:checked + .switch__handle .switch__handle-side {
  transform: rotateY(90deg) translateZ(0.4375em);
}
[dir=rtl] .switch__input:checked + .switch__handle .switch__handle-side {
  transform: rotateY(-90deg) translateZ(0.4375em);
}
.switch__input:checked:before {
  background-color: #0ac213;
}
.switch__keyhole {
  top: 0.625em;
  width: 0.1875em;
  height: 0.375em;
  transition: visibility calc(var(--trans-dur) / 2) steps(1, end);
}
.switch__keyhole, .switch__keyhole:before, .switch__keyhole:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.switch__keyhole:before, .switch__keyhole:after {
  background-color: hsl(var(--hue), 10%, 50%);
  content: "";
  display: block;
}
.switch__keyhole:before {
  border-radius: 50%;
  width: 0.1875em;
  height: 0.1875em;
}
.switch__keyhole:after {
  border-radius: 0 0 0.125em 0.125em;
  top: auto;
  bottom: 0;
  width: 0.1em;
  height: 0.25em;
}
.switch__input:checked + .switch__handle .switch__keyhole {
  visibility: hidden;
}
.switch__label {
  overflow: hidden;
  margin-inline-start: 0.625em;
  position: absolute;
  width: 1px;
  height: 1px;
}
.switch__wrapper {
  position: relative;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: hsl(var(--hue),10%,10%);
    --fg: hsl(var(--hue),10%,90%);
  }

  .switch__input {
    background-color: hsl(var(--hue), 10%, 30%);
  }
  .switch__input:before {
    background-color: hsl(var(--hue), 10%, 40%);
  }
}

Test the padlock toggle switch in various browsers to ensure compatibility. Integrate it into your website or web application by including the HTML and CSS code in your project files.

That’s all! hopefully, you’ve successfully created a padlock toggle switch on your website. This engaging element enhances user experience and adds a touch of creativity to your web projects. Experiment with different styles and functionalities to tailor it to your specific needs.

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...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X