Toggle Time Three Options
How do I make an toggle time three options?
Here's a JS free version with three options on both.. What is a toggle time three options? How do you make a toggle time three options? This script and codes were developed by Pete Nawara on 10 September 2022, Saturday.
Toggle Time Three Options Previews
Toggle Time Three Options - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Toggle Time Three Options</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://cdn.jsdelivr.net/foundation/4.3.1/css/foundation.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! */ @import url('https://fonts.googleapis.com/css?family=Roboto');
body { background: #222 url(https://subtlepatterns.com/patterns/tweed.png) repeat; color: #404040; font: "Roboto", Tahoma, Verdana, sans-serif;
}
body h4,
body h5 { text-align: center; text-transform: uppercase;
}
body .button { background: #0099ff;
}
body .wrap { margin: 10px auto; width: 400px;
}
body .wrap form fieldset { background: #fff;
}
body .wrap form fieldset .toggle { background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; height: 40px; margin: 0px auto; position: relative; width: auto;
}
body .wrap form fieldset .toggle.small { width: 100px;
}
body .wrap form fieldset .toggle .toggle-input { display: none;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label { -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out; color: #fff; font-weight: bold;
}
body .wrap form fieldset .toggle .toggle-input:not(:checked) + .toggle-label-on ~ .toggle-selection { left: 2px; right: 66%;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on.center ~ .toggle-selection { left: 33%; right: 33%; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on.right ~ .toggle-selection { left: 66%; right: 2px; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-label { color: #aaa; cursor: pointer; float: left; font-size: 15px; font-weight: bold; line-height: 38px; position: relative; text-align: center; width: 33%; z-index: 2;
}
body .wrap form fieldset .toggle .toggle-label.full { width: 100%;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-off { padding-left: 2px;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-on { padding-right: 2px;
}
body .wrap form fieldset .toggle .toggle-label.off { opacity: .5;
}
body .wrap form fieldset .toggle .toggle-selection { background: #468C00; border-radius: 3px; display: block; height: 34px; left: 2px; position: absolute; right: 66%; top: 2px; transition: left 0.15s; width: auto; z-index: 1;
}
body .wrap form fieldset .toggle .toggle-selection.full { background: #468c00; left: 2px; right: 2px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <form> <fieldset> <h4>I would like to</h4> <div class="toggle"> <input type="radio" class="toggle-input" name="joincreate" value="join" id="join" checked> <label for="join" class="toggle-label toggle-label-off" id="joinLabel">Join</label> <input type="radio" class="toggle-input" name="joincreate" value="create" id="create"> <label for="create" class="toggle-label toggle-label-on center" id="createLabel">Create</label> <input type="radio" class="toggle-input" name="joincreate" value="third" id="third"> <label for="third" class="toggle-label toggle-label-on right" id="thirdLabel">Destroy</label> <span class="toggle-selection"></span> </div> <h4>a</h4> <div class="toggle"> <input type="radio" class="toggle-input" name="publicprivate" value="public" id="public" checked> <label for="public" class="toggle-label toggle-label-off" id="publicLabel">Public</label> <input type="radio" class="toggle-input" name="publicprivate" value="private" id="private"> <label for="private" class="toggle-label toggle-label-on center" id="privateLabel">Private</label> <input type="radio" class="toggle-input" name="publicprivate" value="another" id="another"> <label for="another" class="toggle-label toggle-label-on right" id="anotherLabel">Stupid</label> <span class="toggle-selection"></span> </div> <h4>League</h4> <a href="#" class="button large expand">Let's go!</a> </fieldset> </form>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Toggle Time Three Options - Script Codes CSS Codes
@import url('https://fonts.googleapis.com/css?family=Roboto');
body { background: #222 url(https://subtlepatterns.com/patterns/tweed.png) repeat; color: #404040; font: "Roboto", Tahoma, Verdana, sans-serif;
}
body h4,
body h5 { text-align: center; text-transform: uppercase;
}
body .button { background: #0099ff;
}
body .wrap { margin: 10px auto; width: 400px;
}
body .wrap form fieldset { background: #fff;
}
body .wrap form fieldset .toggle { background: #f5f5f5; border: 1px solid #ccc; border-radius: 3px; height: 40px; margin: 0px auto; position: relative; width: auto;
}
body .wrap form fieldset .toggle.small { width: 100px;
}
body .wrap form fieldset .toggle .toggle-input { display: none;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label { -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out; color: #fff; font-weight: bold;
}
body .wrap form fieldset .toggle .toggle-input:not(:checked) + .toggle-label-on ~ .toggle-selection { left: 2px; right: 66%;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on.center ~ .toggle-selection { left: 33%; right: 33%; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-input:checked + .toggle-label-on.right ~ .toggle-selection { left: 66%; right: 2px; -moz-transition: all 0.15s ease-out; -o-transition: all 0.15s ease-out; transition: all 0.15s ease-out; -webkit-transition: all 0.15s ease-out;
}
body .wrap form fieldset .toggle .toggle-label { color: #aaa; cursor: pointer; float: left; font-size: 15px; font-weight: bold; line-height: 38px; position: relative; text-align: center; width: 33%; z-index: 2;
}
body .wrap form fieldset .toggle .toggle-label.full { width: 100%;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-off { padding-left: 2px;
}
body .wrap form fieldset .toggle .toggle-label.toggle-label-on { padding-right: 2px;
}
body .wrap form fieldset .toggle .toggle-label.off { opacity: .5;
}
body .wrap form fieldset .toggle .toggle-selection { background: #468C00; border-radius: 3px; display: block; height: 34px; left: 2px; position: absolute; right: 66%; top: 2px; transition: left 0.15s; width: auto; z-index: 1;
}
body .wrap form fieldset .toggle .toggle-selection.full { background: #468c00; left: 2px; right: 2px;
}
| Developer | Pete Nawara |
| Username | petebot |
| Uploaded | September 10, 2022 |
| Rating | 3 |
| Size | 4,205 Kb |
| Views | 24,288 |
Do you need developer help for Toggle Time Three Options?
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!
Pete Nawara (petebot) Script Codes
| Name | Size |
| ScrollMagic playpen | 3,430 Kb |
| KITT | 3,255 Kb |
| Notifications | 5,037 Kb |
| Toggle Time | 5,345 Kb |
| CSS Modal | 3,981 Kb |
| Audio Compare | 7,239 Kb |
| Dynamic Logo Creation | 5,961 Kb |
| Mr. Blinky | 5,148 Kb |
| History Viewer | 5,143 Kb |
| Text Shadow | 2,195 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Sticky footer testing | 75th | 1,649 Kb |
| Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
| Css3 slide | Nakome | 3,190 Kb |
| Responsive scrolling text | Ashdurham | 2,259 Kb |
| Basic HTML5 Structure | YuvarajTana | 1,289 Kb |
| Vue.js | Thommyboy02 | 1,506 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| Multiple jCarousel | Pafnuty | 2,461 Kb |
| Getting Started | Viblast | 1,500 Kb |
| Web Spiral - p5.js | TWAIN | 2,183 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!