On/Off Switch Button - Toggle Buttons for Websites and Apps - 常规

'On/off' switch buttons, also known as toggle buttons, are a fundamental user interface element used to represent a binary state (on or off). They are commonly employed in websites and apps to allow users to quickly and easily activate or deactivate features, settings, or options.

Use Cases of On/Off Switch Buttons:

Enabling/disabling features: For example, enabling notifications or dark mode.
Turning on/off devices: Such as lights, fans, or appliances.
Selecting options: Like choosing between different display modes or language settings.

Design Principles for On/Off Switch Buttons:

Clear visual distinction: The 'on' and 'off' states should be visually distinct to prevent confusion. This can be achieved through contrasting colors, shapes, or animations.
Intuitive placement: The button should be placed in a location that is easily accessible and logically associated with the function it controls.
Consistent feedback: Users should receive clear feedback when they interact with the switch button. This can be achieved through visual changes, sound effects, or haptic feedback.

Code Examples:

While the implementation of 'on/off' switch buttons can vary depending on the programming language and framework, here's a basic HTML, CSS, and JavaScript example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>On/Off Switch Button</title>
  <style>
    .switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }
    
    .switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 34px;
    }
    
    .slider:before {
      position: absolute;
      content: "";
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      -webkit-transition: .4s;
      transition: .4s;
      border-radius: 50%;
    }
    
    input:checked + .slider {
      background-color: #2196F3;
    }
    
    input:focus + .slider {
      box-shadow: 0 0 1px #2196F3;
    }
    
    input:checked + .slider:before {
      -webkit-transform: translateX(26px);
      -ms-transform: translateX(26px);
      transform: translateX(26px);
    }
  </style>
</head>
<body>

  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider"></span>
  </label>

</body>
</html>

This code snippet provides a simple implementation of an 'on/off' switch button using HTML, CSS, and JavaScript. The checkbox input element controls the state of the button, and the CSS styles define its appearance and behavior. The JavaScript can be further customized to add more dynamic features and interactions.