Square Switch

Enhance your website's user experience with a sleek square switch using HTML and CSS. This guide will walk you through the steps to create a customizable square switch that can be integrated seamlessly into your web projects. Follow these instructions to copy the provided code snippet, link the required CSS files, and personalize the switch to match your website's design.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the square switch. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tag within the <head> section to import the CSS styles:
```
<link rel="stylesheet" href="styles.css">
```

Step 3: Customize and Make it Yours

Personalize the square switch to match your website's branding and functionality. Adjust the CSS styles to modify the switch's appearance, colors, and interactions. Experiment with different sizes, colors, and transitions to create a unique and engaging user experience.

By following these steps, you can implement and customize a square switch on your website using HTML and CSS. Tailor the switch to your specific needs and enhance your site's interactivity with this modern and stylish component.

Code Explanation

HTML Code

Outer Container `<div>`

<div>: The outermost container element. It wraps the entire toggle switch for potential further styling or layout purposes.

Toggle Switch Container `<span>`

<span class="switch square">: A <span> element with two classes, switch and square.
switch: This class will likely be used to apply general styles for the toggle switch.
square: This class will likely apply specific styles to make the switch square-shaped.

Input Element `<input>`

<input id="switch-square" type="checkbox"/>: A checkbox input element that will serve as the toggle mechanism.
id="switch-square": This id uniquely identifies the checkbox and links it to the associated <label>.
type="checkbox": Specifies that the input is a checkbox, which can be toggled on and off.

Label Element `<label>`

<label for="switch-square"></label>: A label element linked to the checkbox input.
for="switch-square": The for attribute associates the label with the checkbox input element with the corresponding id switch-square.
Empty Content: The label itself is empty, but it will be styled to appear as a custom switch. Clicking this label will toggle the checkbox on and off.

CSS Code

Global Styles

* {
  box-sizing: border-box;
}

* { box-sizing: border-box; }: Sets box-sizing to border-box for all elements. This means padding and border are included in the element's total width and height, making it easier to manage sizes.

Body Styles

body {
  margin: 0;
  display: grid;
  place-items: center;
  background: #1a1a1a;
  color: #f9f9f9;
  height: 100vh;
}

margin: 0;: Removes default margin from the body.
display: grid; and place-items: center;: Centers its content both horizontally and vertically.
background: #1a1a1a;: Sets a dark background color.
color: #f9f9f9;: Sets the text color to light.
height: 100vh;: Ensures the body takes the full height of the viewport.

Switch Styles

.switch input {
  display: none;
}

display: none;: Hides the default checkbox input.

.switch label {
  display: block;
  width: 60px;
  height: 30px;
  padding: 3px;
  border-radius: 15px;
  border: 2px solid #7e8382;
  cursor: pointer;
  transition: 0.3s;
}

display: block;: Makes the label a block element so it can take width and height.
width: 60px; height: 30px;: Sets the dimensions of the switch.
padding: 3px;: Adds padding inside the switch.
border-radius: 15px;: Rounds the corners to make it a pill shape.
border: 2px solid #7e8382;: Sets a border color.
cursor: pointer;: Changes the cursor to a pointer when hovering.
transition: 0.3s;: Adds a transition effect for smooth changes.

.switch label::after {
  content: "";
  display: inherit;
  width: 20px;
  height: 20px;
  border-radius: 12px;
  background: #7e8382;
  transition: 0.3s;
}

content: "";: Adds an empty content for the pseudo-element.
display: inherit;: Inherits the display property from the parent (block).
width: 20px; height: 20px;: Sets the size of the switch knob.
border-radius: 12px;: Makes the knob round.
background: #7e8382;: Sets the initial background color of the knob.
transition: 0.3s;: Adds a transition effect for smooth changes.

Checked State Styles

.switch input:checked ~ label {
  border-color: #25c89c;
}

border-color: #25c89c;: Changes the border color when the checkbox is checked.

.switch input:checked ~ label::after {
  translate: 30px 0;
  background: #25c89c;
}

translate: 30px 0;: Moves the knob to the right when the checkbox is checked.
background: #25c89c;: Changes the knob color when the checkbox is checked.

Square Switch Styles

.switch.square label,
.switch.square label::after {
  border-radius: 0;
}

border-radius: 0;: Removes the rounded corners, making the switch square-shaped instead of pill-shaped.