.checkboxLabel {
  --rotate-offset: 45deg;
  --time-offset: 200ms;
  --translate-offset: 1rem;
  --delay: 250ms;
  --total-duration: calc(var(--time-offset) + var(--delay) * 7);

position: relative;
  height: 3rem;
  aspect-ratio: 1/1;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform var(--total-duration) ease-in-out;
}

.bar {
  position: absolute;
  height: 3rem;
  width: 0.25rem;
  border-radius: 0.125rem;
  background-color: white;
  top: -50%;
  transform-origin: bottom;
  z-index: 0;
}

#bar1 {
  rotate: calc(var(--rotate-offset));
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 0);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar2 {
  rotate: calc(var(--rotate-offset) * 2);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 1);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar3 {
  rotate: calc(var(--rotate-offset) * 3);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 2);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar4 {
  rotate: calc(var(--rotate-offset) * 4);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 3);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar5 {
  rotate: calc(var(--rotate-offset) * 5);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 4);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar6 {
  rotate: calc(var(--rotate-offset) * 6);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 5);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar7 {
  rotate: calc(var(--rotate-offset) * 7);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 6);
  transform: translateY(calc(var(--translate-offset) * -1));
}
#bar8 {
  rotate: calc(var(--rotate-offset) * 8);
  transition: all var(--time-offset) ease-in;
  transition-delay: calc(var(--delay) * 7);
  transform: translateY(calc(var(--translate-offset) * -1));
}

#checkbox:checked ~ #bar1 {
  transform: translateY(0);
  background-color: #ffadad;
}
#checkbox:checked ~ #bar2 {
  transform: translateY(0);
  background-color: #ffd6a5;
}
#checkbox:checked ~ #bar3 {
  transform: translateY(0);
  background-color: #fdffb6;
}
#checkbox:checked ~ #bar4 {
  transform: translateY(0);
  background-color: #caffbf;
}
#checkbox:checked ~ #bar5 {
  transform: translateY(0);
  background-color: #9bf6ff;
}
#checkbox:checked ~ #bar6 {
  transform: translateY(0);
  background-color: #a0c4ff;
}
#checkbox:checked ~ #bar7 {
  transform: translateY(0);
  background-color: #bdb2ff;
}
#checkbox:checked ~ #bar8 {
  transform: translateY(0);
  background-color: #ffc6ff;
}

.cover {
  height: 4rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #2a3439;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.checkboxLabel:has(:checked) {
  transform: rotate(-360deg);
}

.cover2 {
  height: 2rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background: #91a3b0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  outline-width: 0.25rem;
  outline: solid;
  outline-color: #b2ffff;
}

.inCover2 {
  height: 100%;
  aspect-ratio: 1/1;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.inCover2 .rainbow {
  height: 100%;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.rainbow div {
  flex: 1;
  width: 100%;
}

.rainbow div:nth-child(1) {
  background-color: #ffadad;
}
.rainbow div:nth-child(2) {
  background-color: #ffd6a5;
}
.rainbow div:nth-child(3) {
  background-color: #fdffb6;
}
.rainbow div:nth-child(4) {
  background-color: #caffbf;
}
.rainbow div:nth-child(5) {
  background-color: #9bf6ff;
}
.rainbow div:nth-child(6) {
  background-color: #a0c4ff;
}
.rainbow div:nth-child(7) {
  background-color: #bdb2ff;
}

.nut {
  height: 0.3rem;
  aspect-ratio: 1/1;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  top: 0px;
  transform: translateY(-5px);
  transform-origin: 50% 500%;
}

#nut1 {
  rotate: calc(var(--rotate-offset));
}
#nut2 {
  rotate: calc(var(--rotate-offset) * 2);
}
#nut3 {
  rotate: calc(var(--rotate-offset) * 3);
}
#nut4 {
  rotate: calc(var(--rotate-offset) * 4);
}
#nut5 {
  rotate: calc(var(--rotate-offset) * 5);
}
#nut6 {
  rotate: calc(var(--rotate-offset) * 6);
}
#nut7 {
  rotate: calc(var(--rotate-offset) * 7);
}
#nut8 {
  rotate: calc(var(--rotate-offset) * 8);
}

.lock {
  position: absolute;
  height: 1.5rem;
  aspect-ratio: 1/1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 200ms ease-in;
  transition-delay: var(--total-duration);
}

#checkbox:checked ~ .lock {
  opacity: 1;
}

Live Preview

Ready Ln 1, Col 1

UTF-8 HTML/JS

Rainbow Padlock Checkbox Animation with Pure HTML and CSS

Looking to add a fun, colorful twist to your form toggles or UI elements? This rainbow padlock checkbox animation built using just HTML and CSS offers a creative and interactive way to represent a secure or locked state. Inspired by visual aesthetics and animated transitions, this padlock toggle goes beyond a standard checkbox by combining motion, color, and SVG art.

What This Padlock Checkbox Does

This design transforms a regular checkbox into an animated padlock mechanism. When unchecked, you see neutral spinning bars forming a lock base. Once you click to check it:

Eight bars rise in a staggered animation, each with a different color.
A glowing lock icon fades in at the center.
The entire toggle rotates for a smooth visual transition.
It feels like a lock powering up with energy.

All of this is created without JavaScript — only with HTML and CSS!

Key Features of the Animation

1. Animated Lock Bars

The .bar elements are positioned in a circular pattern and animate outward when toggled. Each one:

Rotates based on a shared offset.
Delays independently for a staggered rise effect.
Changes color on activation, creating a rainbow burst.

2. Colored Nuts

Small circular dots (.nut) are placed at the base of each bar to act as pivots or visual accents. They help enhance the sense of structure.

3. Center Covers and Lock Symbol

A circular .cover and .cover2 act as the background and outline.
Inside .cover2, there’s a vertically stacked rainbow gradient, representing security layers or a digital aura.
An SVG lock icon appears smoothly after all animations complete, reinforcing the “locked” state.

4. Full Rotation on Toggle

The entire component rotates 360 degrees when the checkbox is checked. This adds a dynamic effect and simulates a locking mechanism turning into place.

Why This Stands Out

Pure CSS & HTML: No JavaScript or external libraries required.
Rainbow Aesthetic: Adds life to otherwise static toggle switches.
Customizable: Colors, speeds, and rotation angles can be easily adjusted.
Interactive Visual Feedback: Clearly shows whether the state is locked or unlocked.

Perfect For:

Login or signup screens
Security-related UI sections
Toggle switches that need extra flair
Any modern web app looking to add a delightful micro-interaction

Learn and Customize This UI Component

This type of checkbox is a perfect exercise for learning:

:checked state manipulation
CSS animations with transition-delay and transform
How to coordinate multiple elements using calc() and --custom-properties
Accessibility-focused interactive design using SVG and forms

Conclusion

Interactive elements like this rainbow padlock toggle not only improve the visual appeal of your site but also help guide user experience through meaningful animation. Whether you’re building a form, an authentication interface, or just experimenting with CSS skills, this animated checkbox offers a fun and creative solution.

Feel free to tweak the colors, lock SVG, or animation duration to match your brand’s theme or app style.

Stay secure, and make it colorful — all with just HTML and CSS.

This code uses HTML and CSS only — no JavaScript included.

MIT License

Permission is freely granted to anyone who obtains a copy of this software and its accompanying documentation files (referred to as “the Software”), allowing them to use, copy, modify, merge, publish, distribute, sublicense, and even sell copies of the Software. Additionally, users are allowed to permit others to use the Software under these same terms.

It is required that the above copyright notices and this permission notice be included in all versions or significant portions of the Software.

Please note, the Software is provided “as is”, without any form of warranty—express or implied. This includes, but is not limited to, warranties of merchantability, fitness for a specific purpose, or non-infringement. Under no circumstances shall the original authors or rights holders be held responsible for any claims, damages, or other liabilities that may arise from the use of the Software, whether through legal action, negligence, or otherwise.

All code on Freeofcosts.com is reviewed before publishing. Each post includes a live code editor with real-time preview, so you can experiment and learn by doing. Most code is open-source and free to use or modify under respective licenses.