Skeuomorphic Retro Power Buttons

Skeuomorphic design meets modern web animation in these Windows XP-inspired power buttons. This component utilizes detailed CSS shadows to create a tactile 3D effect, paired with SVG path manipulation for playful micro-interactions upon interaction.

Core Technique

The animation logic is governed by a lightweight JavaScript class that manages the lifecycle of the “animated” state. Instead of relying solely on CSS :hover, which can be jittery, the script listens for mouseover, focus, and touchstart to add a specific animation class. The most critical part of this implementation is the synchronization between JavaScript and the CSS @keyframes: the script utilizes the animationend event on a designated SVG element (marked with data-anim-end) to remove the class and allow the animation to be cleanly re-triggered.

Visually, the icons leverage the “line drawing” effect. By manipulating stroke-dasharray and stroke-dashoffset in CSS, the SVG paths appear to grow, shrink, or rotate with an elastic feel. This is particularly evident in the “Stand By” icon, where the circle and bar move independently but are timed together to create a cohesive mechanical motion.

Customization

The buttons are built using HSL color values and relative em units, making them fully scalable to any layout size. You can adjust the colors by overriding the background properties and the animation timing functions to change the “feel” of the interaction.

.icon-btn--red {
  /* Change this HSL value to update the button theme */
  background-color: hsl(12, 76%, 53%);
}

.icon__part {
  /* Adjust duration for faster or slower icon morphing */
  animation-duration: 0.8s;
}

@keyframes standBy1 {
  /* Use cubic-bezier to refine the bounce physics */
  33.33% {
    animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
    stroke-dashoffset: -7;
    transform: translate(0, 7px);
  }
}

Tips

1. Reliable Animation Reset: When restarting animations via classes, simply removing and adding a class in JS often fails because the browser doesn’t register the change between frames. This snippet uses the animationend event, which is the most performant and reliable way to handle “one-shot” micro-interactions that need to be ready for the next user input.

2. Accessibility: While the design is retro, the accessibility is modern. Each component uses a semantic <button> tag with a clear aria-label. The SVG icons are decorative and correctly hidden from screen readers using aria-hidden="true", ensuring the focus remains on the functional label.