Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <title>Slider Switch<style id="jsbin-css">
- *{
- box-sizing: border-box;
- }
- .SliderSwitch {
- text-align: center;
- }
- .SliderSwitch input{
- visibility: hidden;
- display: block;
- width: 1px;
- height: 1px;
- }
- .SliderSwitch__container{
- font-family: 'OpenSans';
- font-size: 13px;
- color: #fff;
- background-color: #824fa0;
- height: 32px;
- display: inline-block;
- width: 240px;
- border-radius: 16px;
- position: relative;
- vertical-align: middle;
- box-shadow: inset 0px 0px 3px 1px rgba(0,0,0,0.3);
- cursor: pointer;
- margin-left: 10px;
- }
- .SliderSwitch__container:before {
- content: 'Sounds';
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- width: 50%;
- text-align: center;
- }
- .SliderSwitch__container_second:after {
- content: 'Spelling';
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- width: 150%;
- text-align: center;
- }
- .SliderSwitch__toggle {
- display: block;
- height: 32px;
- width: 120px;
- border-radius: 16px;
- background-color: white;
- border: 2px solid #824fa0;
- position: absolute;
- top: 0px;
- left: 0px;
- box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
- cursor: pointer;
- transition: left 300ms ease-in-out;
- }
- .SliderSwitch__toggle:after {
- content: 'Sounds';
- font-family: 'OpenSans';
- font-size: 13px;
- color: #824fa0;
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- left: 0;
- width: 100%;
- text-align: center;
- }
- input:checked + .SliderSwitch__container .SliderSwitch__toggle {
- left: calc( 50% );
- }
- input:checked + .SliderSwitch__container .SliderSwitch__toggle:after {
- content: 'Spelling';
- color: #824fa0;
- }
- </style>
- </title>
- <body>
- <div class="SliderSwitch">
- <label for="switch">
- <input id="switch" type="checkbox" />
- <div class="SliderSwitch__container">
- <div class="SliderSwitch__container_second"></div>
- <div class="SliderSwitch__toggle">
- </div>
- </div>
- </label>
- </div>
- <script id="jsbin-source-css" type="text/css">*{
- box-sizing: border-box;
- }
- .SliderSwitch {
- text-align: center;
- }
- .SliderSwitch input{
- visibility: hidden;
- display: block;
- width: 1px;
- height: 1px;
- }
- .SliderSwitch__container{
- font-family: 'OpenSans';
- font-size: 13px;
- color: #fff;
- background-color: #824fa0;
- height: 32px;
- display: inline-block;
- width: 240px;
- border-radius: 16px;
- position: relative;
- vertical-align: middle;
- box-shadow: inset 0px 0px 3px 1px rgba(0,0,0,0.3);
- cursor: pointer;
- margin-left: 10px;
- }
- .SliderSwitch__container:before {
- content: 'Sounds';
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- width: 50%;
- text-align: center;
- }
- .SliderSwitch__container_second:after {
- content: 'Spelling';
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- width: 150%;
- text-align: center;
- }
- .SliderSwitch__toggle {
- display: block;
- height: 32px;
- width: 120px;
- border-radius: 16px;
- background-color: white;
- border: 2px solid #824fa0;
- position: absolute;
- top: 0px;
- left: 0px;
- box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
- cursor: pointer;
- transition: left 300ms ease-in-out;
- }
- .SliderSwitch__toggle:after {
- content: 'Sounds';
- font-family: 'OpenSans';
- font-size: 13px;
- color: #824fa0;
- display: block;
- position: absolute;
- top: 50%;
- margin-top: -8px;
- left: 0;
- width: 100%;
- text-align: center;
- }
- input:checked + .SliderSwitch__container .SliderSwitch__toggle {
- left: calc( 50% );
- }
- input:checked + .SliderSwitch__container .SliderSwitch__toggle:after {
- content: 'Spelling';
- color: #824fa0;
- }</script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement