Slide To Shutdown Windows 11 (2025)
<div class="shutdown-panel" id="shutdownPanel"> <div class="power-header"> <div class="power-icon"> <svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M12 3v9M8.5 7.5A6 6 0 1 0 15.5 7.5" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/> <path d="M18 14.5c1.5 1 2.5 2.5 2.5 4.5 0 2.5-2 4.5-4.5 4.5h-8C5 23.5 3 21.5 3 19c0-2 1-3.5 2.5-4.5" stroke="currentColor" stroke-linecap="round"/> </svg> </div> <div class="title">Shutdown</div> <div class="sub">Slide to power off · Windows 11 inspired</div> </div>
/* the sliding thumb (draggable element) */ .slider-thumb width: 68px; height: 68px; background: rgba(255, 255, 255, 0.96); border-radius: 100px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255,255,240,0.5); transition: box-shadow 0.1s, transform 0.05s linear; backdrop-filter: blur(2px); color: #1f2a48; font-weight: 600; font-size: 1.6rem; cursor: grab; will-change: transform; slide to shutdown windows 11
.title font-size: 1.9rem; font-weight: 600; letter-spacing: -0.3px; background: linear-gradient(135deg, #ffffff, #c0d0ff); background-clip: text; -webkit-background-clip: text; color: transparent; margin-top: 0.25rem; div class="shutdown-panel" id="shutdownPanel">
.shake-warning animation: gentleShake 0.25s ease-in-out 0s 1; box-shadow: 0 4px 14px rgba(0