Material Switches

Developer
Simeon Simeonoff
Size
2,691 Kb
Views
24,288
  1. Material Switches Previews
  2. Material Switches HTML Codes
  3. Material Switches CSS Codes

How do I make an material switches?

What is a material switches? How do you make a material switches? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

Material Switches Previews
IQ Test

Material Switches - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Material Switches</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cntr"> <div class="ig-control"> <input type="checkbox" id="unchecked" class="ig-control__switch" /> <label for="unchecked" class="ig-control__lbl"></label> </div> <div class="ig-control"> <input type="checkbox" id="checked" class="ig-control__switch" checked/> <label for="checked" class="ig-control__lbl"></label> </div> <div class="ig-control"> <input type="checkbox" id="unchecked_disabled" class="ig-control__switch" disabled/> <label for="unchecked_disabled" class="ig-control__lbl"></label> </div> <div class="ig-control"> <input type="checkbox" id="checked_disabled" class="ig-control__switch" checked disabled/> <label for="checked_disabled" class="ig-control__lbl"></label> </div>
</div>
</body>
</html>

Material Switches - Script Codes CSS Codes

.cntr { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
/* Remove default checkbox */
.ig-control__switch:not(:checked),
.ig-control__switch:checked { opacity: 0; position: absolute; margin: 0; z-index: -1; width: 0; height: 0; overflow: hidden; left: 0; pointer-events: none;
}
.ig-control { margin: 20px 0; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.ig-control__switch ~ label { position: relative; display: block; width: 35px; height: 14px; background-color: #757575; color: transparent; border-radius: 100px; cursor: pointer; -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
.ig-control__switch ~ label:after { content: ''; position: absolute; top: -3px; left: -1px; display: block; width: 20px; height: 20px; border-radius: 100px; background: #fff; box-shadow: 0 2px 4px 0 rgba(72, 72, 72, 0.5); -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
.ig-control__switch:checked ~ label { background: rgba(3, 117, 190, 0.5);
}
.ig-control__switch:checked ~ label:after { -webkit-transform: translateX(16px); transform: translateX(16px); background: #0375BE;
}
.ig-control__switch:disabled ~ label { background: #F0F0F0; pointer-events: none;
}
.ig-control__switch:disabled ~ label:after { background: #D1D1D1; box-shadow: 0 1px 2px 0 rgba(72, 72, 72, 0.5);
}
Material Switches - Script Codes
Material Switches - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 2,691 Kb
Views 24,288
Do you need developer help for Material Switches?

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!

Simeon Simeonoff (simeonoff) Script Codes
Name
Notification Animation - Bounce Blur
Avatar
Notification Animation
Flexbox SASS Grid
Material Radio Buttons
Toggle Buttons
Material Design Calendar
Flex Table
Bouncy Switch
A Pen by Simeon Simeonoff
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!