Single-element Toggle Switch

Developer
Keith Pickering
Size
3,875 Kb
Views
28,336
  1. Single-element Toggle Switch Previews
  2. Single-element Toggle Switch HTML Codes
  3. Single-element Toggle Switch CSS Codes
  4. Single-element Toggle Switch JS Codes

How do I make an single-element toggle switch?

Just another toggle switch.. What is a single-element toggle switch? How do you make a single-element toggle switch? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Single-element Toggle Switch Previews
IQ Test

Single-element Toggle Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Single-element Toggle Switch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ *, *:before,
*:after { box-sizing: border-box;
}
html { font-family: 'Roboto Condensed', sans-serif; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; color: #ECEFF1; background-image: radial-gradient(#4f6875, #263238);
}
.toggle { position: relative; display: block; margin: 0 auto; width: 150px; height: 60px; color: white; outline: 0; text-decoration: none; border-radius: 100px; border: 2px solid #546E7A; background-color: #263238; transition: all 500ms;
}
.toggle:active { background-color: #1c2429;
}
.toggle:hover:not(.toggle--moving):after { background-color: #455A64;
}
.toggle:after { display: block; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); line-height: 45px; text-align: center; text-transform: uppercase; font-size: 20px; color: white; background-color: #37474F; border: 2px solid; transition: all 500ms;
}
.toggle--on:after { content: 'On'; border-radius: 50px 5px 5px 50px; color: #66BB6A;
}
.toggle--off:after { content: 'Off'; border-radius: 5px 50px 50px 5px; transform: translate(100%, 0); color: #f44336;
}
.toggle--moving { background-color: #1c2429;
}
.toggle--moving:after { color: transparent; border-color: #435862; background-color: #222c31; transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
}
h1 { font-size: 64px; margin-top: 0; margin-bottom: 50px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300' rel='stylesheet' type='text/css'>
<h1>Toggle.</h1>
<a href="#" class="toggle toggle--on"></a> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Single-element Toggle Switch - Script Codes CSS Codes

*, *:before,
*:after { box-sizing: border-box;
}
html { font-family: 'Roboto Condensed', sans-serif; display: flex; justify-content: center; align-items: center; text-align: center; height: 100%; color: #ECEFF1; background-image: radial-gradient(#4f6875, #263238);
}
.toggle { position: relative; display: block; margin: 0 auto; width: 150px; height: 60px; color: white; outline: 0; text-decoration: none; border-radius: 100px; border: 2px solid #546E7A; background-color: #263238; transition: all 500ms;
}
.toggle:active { background-color: #1c2429;
}
.toggle:hover:not(.toggle--moving):after { background-color: #455A64;
}
.toggle:after { display: block; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); line-height: 45px; text-align: center; text-transform: uppercase; font-size: 20px; color: white; background-color: #37474F; border: 2px solid; transition: all 500ms;
}
.toggle--on:after { content: 'On'; border-radius: 50px 5px 5px 50px; color: #66BB6A;
}
.toggle--off:after { content: 'Off'; border-radius: 5px 50px 50px 5px; transform: translate(100%, 0); color: #f44336;
}
.toggle--moving { background-color: #1c2429;
}
.toggle--moving:after { color: transparent; border-color: #435862; background-color: #222c31; transition: color 0s, transform 500ms, border-radius 500ms, background-color 500ms;
}
h1 { font-size: 64px; margin-top: 0; margin-bottom: 50px;
}

Single-element Toggle Switch - Script Codes JS Codes

$('.toggle').click(function(e) { var toggle = this; e.preventDefault(); $(toggle).toggleClass('toggle--on') .toggleClass('toggle--off') .addClass('toggle--moving'); setTimeout(function() { $(toggle).removeClass('toggle--moving'); }, 200)
});
Single-element Toggle Switch - Script Codes
Single-element Toggle Switch - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 4.5
Size 3,875 Kb
Views 28,336
Do you need developer help for Single-element Toggle Switch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Keith Pickering (keithpickering) Script Codes
Name
Lovely Transforming Menu Button
Windows 10 Concept
Text Inputs with Sliding Labels
Material Inspired Menu
Sliding Navigation Menu
Delicious SASS Buttons
Smooth, Semantic Tab Box
CSS Business Card
Metro Interactive Live Tiles
Easy Container-Breaking Sidebar
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!