Flat Toggle Switch

Developer
Bryan Fillmer
Size
2,469 Kb
Views
8,096
  1. Flat Toggle Switch Previews
  2. Flat Toggle Switch HTML Codes
  3. Flat Toggle Switch CSS Codes

How do I make an flat toggle switch?

Reworked to fit with Flatly from Bootswatch for a work project.Remake of the Dribbble shot Flat Toggle Switch by Joshua Andrew Davies.. What is a flat toggle switch? How do you make a flat toggle switch? This script and codes were developed by Bryan Fillmer on 11 December 2022, Sunday.

Flat Toggle Switch Previews
IQ Test

Flat Toggle Switch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Toggle Switch</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootswatch/3.3.0/flatly/bootstrap.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! */
.input-toggle input { display: none; appearance: none;
}
.input-toggle label { width: 150px; height: 75px; background-color: #d55050; box-shadow: inset 0px 6px 0px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
}
.input-toggle input:checked ~ label { background-color: #50d5a1;
}
.input-toggle input:checked ~ label div.s { margin-left: 74px;
}
.input-toggle label div.s { width: 70px; height: 64px; background-color: #fafafa; border-radius: 8px; position: relative; top: 3px; left: 3px; box-shadow: 0px 5px 0px 0px #d2d2d2; cursor: pointer;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="input-toggle"> <input id="checkbox" type="checkbox"> <label for="checkbox"> <div class="s"></div> </label>
</div>
</body>
</html>

Flat Toggle Switch - Script Codes CSS Codes

.input-toggle input { display: none; appearance: none;
}
.input-toggle label { width: 150px; height: 75px; background-color: #d55050; box-shadow: inset 0px 6px 0px 0px rgba(0, 0, 0, 0.2); border-radius: 10px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
}
.input-toggle input:checked ~ label { background-color: #50d5a1;
}
.input-toggle input:checked ~ label div.s { margin-left: 74px;
}
.input-toggle label div.s { width: 70px; height: 64px; background-color: #fafafa; border-radius: 8px; position: relative; top: 3px; left: 3px; box-shadow: 0px 5px 0px 0px #d2d2d2; cursor: pointer;
}
Flat Toggle Switch - Script Codes
Flat Toggle Switch - Script Codes
Home Page Home
Developer Bryan Fillmer
Username bfillmer
Uploaded December 11, 2022
Rating 3
Size 2,469 Kb
Views 8,096
Do you need developer help for Flat 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!

Bryan Fillmer (bfillmer) Script Codes
Name
Attribute Modules for CSS
Basic Javascript Chaining
Project Euler Problem 17
On A Boat
JS Playground
Angular Animation Playground
Toggle Overlay on UL
Five Programming Problems
Regex Sensei
Shopping Site Mockup
Create amazing SEO content 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!