Easy Toggle SwitchesEasy Toggle Switches
Easy-to-use, easy-to-customize Toggle Switches for your web projects!
Easy Toggle Switches
Easy-to-use, easy-to-customize Toggle Switches for your web projects!
Screenshots
Overview
These are easy-to-use, no JavaScript required, pure CSS Toggle Switches for your project. All you have to do is download the files and insert a few lines into your project.
If you need to change the colors or other parameters, you can simply change the values of the CSS variables (easy!) at the top of the CSS file.
Features
Features:
- 3 Types
- Pure CSS w/ variables
- No JavaScript
- Easy-to-Use
- Easy-to-Customize
- Help Documentation Included
- Works in Chrome, Firefox, Edge, and Safari
Requirements
- Basic HTML knowledge
- How to change CSS values
Instructions
Easy Toggle Switches - Documentation
Thank you for purchasing Easy Toggle Switches. Here is a quick guide to help you.
Step 1
Put the easy-toggle-switches.css in your web project.
Step 2
Link to the easy-toggle-switches.css inside the <head> tag in all your HTML files.
<head>
...
<link rel="stylesheet" type="text/css" href="easy-toggle-switches.css">
...
</head>
Step 3
Paste the following HTML snippet wherever you want a Toggle Switch:
<input type="checkbox" id="your-id" />
<label class="switch-1" for="your-id"></label>
Step 4
Change your-id to a unique value for that specific Toggle Switch. We've included
another snippet below with an updated id for the toggle:
<input type="checkbox" id="my-switch1" />
<label class="switch-1" for="my-switch1"></label>
Step 5
You can easily swap out the switch type by changing the label class. We'll change it to a
Gradient Switch (switch-2) in the snippet below:
<input type="checkbox" id="my-switch1" />
<label class="switch-2" for="my-switch1"></label>
All done!
Other Options
To change the size, speed, and colors of the Toggle Switch, there are 14 different
values you can tweak in the easy-toggle-switches.css file.
Use a hexadecimal color picker to change colors, and tweak the pixel and second
values to change the speed and dimensions.
/* Accent Colors */
--accent
: #43b27f;
--dark-accent
: #3ca172;
/* Gray Colors */
--lite-gray
: #eee;
--gray
: #dbdbdb;
--darker-gray
: #cbcbcb;
--darkest-gray
: #343434;
/* Edit Track sizes */
--track-width
: 70px;
--track-height
: 34px;
/* Edit Toggle sizes */
--toggle-width
: 30px;
--toggle-height
: 30px;
/* Edit Toggle speed */
--toggle-speed
: 0.2s;
/* Edit Border sizes */
--border-radius-track
: 100px;
--border-radius-toggle
: 90px;
