Lock and Unlock Button
A padlock button that unlocks on click: the key hole turns, the shackle pops up and swings open, and the button goes from 'Locked' to a green 'Unlocked'. Click again to lock it back.
Also known as: unlock button animation css, css login button animation, padlock toggle button.
HTML
<label class="btn-lock-unlock">
<input class="btn-lock-unlock-input" type="checkbox" aria-label="Unlock">
<span class="btn-lock-unlock-face" aria-hidden="true">
<svg viewBox="0 0 24 24">
<path class="btn-lock-unlock-shackle" d="M8 11V7.5a4 4 0 0 1 8 0V11"/>
<rect x="4.5" y="10.5" width="15" height="10.5" rx="2.5"/>
<path class="btn-lock-unlock-hole" d="M12 14.5v2.5"/>
</svg>
<span class="btn-lock-unlock-text"><span>Locked</span><span>Unlocked</span></span>
</span>
</label>CSS
.btn-lock-unlock {
--c: var(--btn-color, #3b82f6);
position: relative;
display: inline-grid;
place-items: center;
font: 600 var(--btn-size, 18px)/1.1 system-ui, sans-serif;
cursor: pointer;
user-select: none;
-webkit-tap-highlight-color: transparent;
--ok: #16a34a;}
.btn-lock-unlock-input {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.btn-lock-unlock-face {
display: inline-flex;
align-items: center;
gap: 0.55em;
width: 8.6em;
box-sizing: border-box;
padding: 0.75em 1.3em;
border-radius: 0.7em;
background-color: var(--c);
color: #fff;
box-shadow: 0 0.4em 1em -0.4em var(--c);
transition: background-color 0.35s ease 0.25s, box-shadow 0.35s ease 0.25s, transform 0.2s ease;
}
.btn-lock-unlock-face svg {
flex: none;
width: 1.3em;
height: 1.3em;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.btn-lock-unlock-face svg * { transform-box: fill-box; }
.btn-lock-unlock-shackle {
transform-origin: 0 100%;
transition: transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.btn-lock-unlock-hole {
transform-origin: 50% 0;
transition: transform 0.25s ease;
}
.btn-lock-unlock-text { display: grid; }
.btn-lock-unlock-text span {
grid-area: 1 / 1;
transition: opacity 0.25s ease 0.2s, transform 0.35s cubic-bezier(0.3, 0.7, 0.4, 1) 0.2s;
}
.btn-lock-unlock-text span:last-child {
opacity: 0;
transform: translateY(0.6em);
}
.btn-lock-unlock:active .btn-lock-unlock-face { transform: scale(0.95); }
.btn-lock-unlock-input:focus-visible ~ .btn-lock-unlock-face {
outline: 2px solid var(--c);
outline-offset: 0.2em;
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face {
background-color: var(--ok);
box-shadow: 0 0.4em 1em -0.4em var(--ok);
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-hole { transform: rotate(-90deg); }
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-shackle {
transform: translateY(-28%) scaleX(-1);
animation: btn-lock-unlock-open 0.7s cubic-bezier(0.3, 0.7, 0.4, 1) 0.1s both;
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-text span:first-child {
opacity: 0;
transform: translateY(-0.6em);
}
.btn-lock-unlock-input:checked ~ .btn-lock-unlock-face .btn-lock-unlock-text span:last-child {
opacity: 1;
transform: none;
}
@keyframes btn-lock-unlock-open {
0% { transform: none; }
35% { transform: translateY(-34%); }
100% { transform: translateY(-28%) scaleX(-1); }
}
@media (prefers-reduced-motion: reduce) {
.btn-lock-unlock, .btn-lock-unlock *, .btn-lock-unlock::before, .btn-lock-unlock::after, .btn-lock-unlock *::before, .btn-lock-unlock *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}Customizing this snippet
- Color: set
--btn-coloron the element or a parent. Currently previewing#3b82f6. - Base size: set
--btn-size. Every other dimension is inem, so the whole thing scales together. Currently previewing18px. - Speed: change the duration on the
transitionoranimationshorthand. Staggered delays are relative, so they keep their rhythm. - Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.