Checkbox Lock by admin

0 Add to Favorites

HTML Code
CSS Code

.btn-lock {
  position: absolute;
  top: calc(50% - 32px);
  left: calc(50% - 32px);
  display: inline-block;
  background: #ff5b5b;
  width: 64px;
  height: 64px;
  box-sizing: border-box;
  padding: 12px 0 0 18px;
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn-lock svg {
  fill: none;
  transform: translate3d(0, 0, 0);
}

.btn-lock svg .bling {
  stroke: #fff;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 3;
  stroke-dashoffset: 15;
  transition: all 0.3s ease;
}

.btn-lock svg .lock {
  stroke: #fff;
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-dasharray: 36;
  transition: all 0.4s ease;
}

.btn-lock svg .lockb {
  fill: #fff;
  fill-rule: evenodd;
  clip-rule: evenodd;
  transform: rotate(8deg);
  transform-origin: 14px 20px;
  transition: all 0.2s ease;
}

#inpLock {
  display: none;
}

#inpLock:checked + label {
  background: #20cca5;
}

#inpLock:checked + label svg {
  opacity: 1;
}

#inpLock:checked + label svg .bling {
  animation: bling6132 0.3s linear forwards;
  animation-delay: 0.2s;
}

#inpLock:checked + label svg .lock {
  stroke-dasharray: 48;
  animation: locked 0.3s linear forwards;
}

#inpLock:checked + label svg .lockb {
  transform: rotate(0);
  transform-origin: 14px 22px;
}

@keyframes bling6132 {
  50% {
    stroke-dasharray: 3;
    stroke-dashoffset: 12;
  }

100% {
    stroke-dasharray: 3;
    stroke-dashoffset: 9;
  }
}

@keyframes locked {
  50% {
    transform: translateY(1px);
  }
}

Uploaded: 13th July 2024

Tags: #locked, #unlocked, #red, #circle, #green

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 26 CSS properties used in the above example. Click to view and learn about each property.

position top left display background width height box-sizing padding border-radius cursor fill transform stroke stroke-width stroke-linecap stroke-dasharray stroke-dashoffset transition stroke-linejoin fill-rule clip-rule transform-origin opacity animation animation-delay

HTML Tags Used

There are 6 HTML Tags used in the above example. Click to view and learn about each tag.

html body input label svg path