<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive Glass Cards</title>
<style>
.switch {
position: relative;
width: 210px;
height: 50px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 3px;
background: #0d0d0d;
border-radius: 6px;
-webkit-box-shadow:
inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
0 1px 0 0 rgba(255, 255, 255, 0.1);
box-shadow:
inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch input[type="checkbox"] {
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.switch input[type="checkbox"] + label {
position: relative;
display: block;
left: 0;
width: 50%;
height: 100%;
background: #1b1c1c;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"] + label:before {
content: "";
display: inline-block;
width: 5px;
height: 5px;
margin-left: 10px;
background: #fff;
border-radius: 50%;
vertical-align: middle;
-webkit-box-shadow:
0 0 5px 2px rgba(165, 15, 15, 0.9),
0 0 3px 1px rgba(165, 15, 15, 0.9);
box-shadow:
0 0 5px 2px rgba(165, 15, 15, 0.9),
0 0 3px 1px rgba(165, 15, 15, 0.9);
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.switch input[type="checkbox"] + label:after {
content: "";
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
.switch input[type="checkbox"] + label i {
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 3px;
height: 24px;
margin-top: -12px;
margin-left: -1.5px;
border-radius: 2px;
background: #0d0d0d;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] + label i:before,
.switch input[type="checkbox"] + label i:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: 2px;
background: #0d0d0d;
-webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] + label i:before {
left: -7px;
}
.switch input[type="checkbox"] + label i:after {
left: 7px;
}
.switch input[type="checkbox"]:checked + label {
left: 50%;
}
.switch input[type="checkbox"]:checked + label:before {
-webkit-box-shadow:
0 0 5px 2px rgba(15, 165, 70, 0.9),
0 0 3px 1px rgba(15, 165, 70, 0.9);
box-shadow:
0 0 5px 2px rgba(15, 165, 70, 0.9),
0 0 3px 1px rgba(15, 165, 70, 0.9);
}
</style>
</head>
<body>
<div class="switch">
<input id="toggle" type="checkbox" />
<label class="toggle" for="toggle">
<i></i>
</label>
</div>
</body>
</html>
JavaScript UI Libraries for Surveys and Forms
SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)