a retro looking, CSS only button.
A Pen by pluton wan on CodePen.
Created
May 9, 2024 17:45
-
-
Save kmrtylmz/4c79bd8dc07d9be4452b10b9d93571ec to your computer and use it in GitHub Desktop.
oldschool toggeler in CSS3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <fieldset> | |
| <div class='legend'><span>power switchs</span></div> | |
| <div class='checkboxGroup'> | |
| <label class='checkboxControl'> | |
| <input type='checkbox' /> | |
| <div>ΟΙ</div><b></b> | |
| <span class='indicator'></span> | |
| </label> | |
| <label class='checkboxControl'> | |
| <input type='checkbox' /> | |
| <div>ΟΙ</div><b></b> | |
| <span class='indicator'></span> | |
| </label> | |
| </div> | |
| <label class='checkboxControl2'> | |
| <input type='checkbox' /> | |
| <div></div> | |
| <span class='indicator'></span> | |
| </label> | |
| <label class='checkboxControl2'> | |
| <input type='checkbox' /> | |
| <div></div> | |
| <span class='indicator'></span> | |
| </label> | |
| </fieldset> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var snd = new Audio('http://www.ilovewavs.com/Effects/Beeps/Click02.wav'); | |
| // delegated event on inputs of checkboxControl | |
| document.addEventListener('change', function(e){ | |
| if(e.target.parentNode.className.indexOf('checkboxControl') != -1){ | |
| snd.currentTime = 0; | |
| snd.play(); | |
| } | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ margin:0; padding:0; } | |
| html, body{ height:100%; } | |
| body{ font:15px/1 arial; text-align:center; background:#509DAD; } | |
| body:before{ content:''; display:inline-block; height:100%; vertical-align:middle; } | |
| fieldset{ display:inline-block; vertical-align:middle; border:none; width:370px; } | |
| .legend{ color:rgba(0,0,0,.7); font-size:12px; margin-bottom:14px; height:15px; border-color:#2E6677; border-style:solid; border-width:1px 1px 0 1px; box-shadow:1px 1px 0 rgba(255,255,255,0.2) inset; text-shadow:0 1px rgba(255,255,255,.3); } | |
| .legend span{ text-transform:uppercase; position:relative; top:-5px; padding:0 10px; background:#509DAD; display:inline-block; } | |
| .checkboxGroup{ display:inline-block; vertical-align:middle; width:150px; border:none; } | |
| /*------- Horizontal power swtich ---------*/ | |
| .checkboxControl{ | |
| border:2px solid #102838; border-radius:7px; display:inline-block; width:100px; height:50px; padding-top:1px; position:relative; vertical-align:middle; margin:0 60px 10px 0; color:#297597; | |
| box-shadow: 0 0 5px rgba(255,255,255,.4), | |
| 0 2px 1px -1px rgba(255,255,255,.7) inset, | |
| 8px 0 5px -5px #02425C inset, | |
| -8px 0 5px -5px #02425C inset; | |
| -moz-user-select:none; -webkit-user-select:none; | |
| background:#80DCE9; | |
| } | |
| .checkboxControl input{ position:absolute; visibility:hidden; } | |
| .checkboxControl > div{ | |
| background:-webkit-linear-gradient(left, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%); | |
| background:linear-gradient(to right, #8FD9E4 0%,#A0F2FE 53%,#69DCF1 56%,#33AFCE 99%,#CEF5FF 100%); | |
| box-shadow:-2px 0 1px 0 #A6F2FE inset; | |
| border-radius:5px; line-height:50px; font-weight:bold; cursor:pointer; position:relative; z-index:1; text-shadow:0 1px rgba(255,255,255,0.5); | |
| transform-origin:0 0; -webkit-transform-origin:0 0; | |
| transform:scaleX(0.93); -webkit-transform:scaleX(0.93); | |
| transition:.1s; -webkit-transition:0.1s; | |
| } | |
| .checkboxControl div:first-letter{ letter-spacing:55px; } | |
| .checkboxControl :checked ~ div{ | |
| transform-origin:100% 0; -webkit-transform-origin:100% 0; | |
| box-shadow:2px 0 1px 0 #A6F2FE inset; | |
| background:-webkit-linear-gradient(left, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%); | |
| background:linear-gradient(to right, #CEF5FF 0%,#33AFCE 1%,#69DCF1 47%,#A0F2FE 50%,#8FD9E4 100%); | |
| } | |
| /* bottom shadow of 'upper' side of the button */ | |
| .checkboxControl > b{ position:absolute; bottom:0; right:0; width:50%; height:100%; border-radius:8px; -webkit-transform:skewY(5deg); transform:skewY(5deg); box-shadow: 0 6px 8px -5px #000; } | |
| .checkboxControl :checked ~ b{ right:auto; left:0; -webkit-transform:skewY(-5deg); transform:skewY(-5deg); } | |
| /* the light indicator to the right of the button */ | |
| .checkboxControl .indicator{ position:absolute; top:14px; right:-20px; width:8px; height:25px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; } | |
| .checkboxControl .indicator:before{ content:''; display:inline-block; margin-top:8px; width:2px; height:8px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; } | |
| .checkboxControl :checked ~ .indicator:before{ box-shadow:0 0 7px 6px #BAFC58; width:6px; background:#F0F9E3; transition:0.1s; -webkit-transition:0.1s; } | |
| /*------- Vertical power swtich ---------*/ | |
| .checkboxControl2{ | |
| border:2px solid #102838; border-radius:7px; display:inline-block; vertical-align:middle; font-weight:bold; | |
| width:60px; height:100px; position:relative; margin:0 5px; | |
| color:#12678C; box-shadow:0 0 5px rgba(255,255,255,.4); | |
| } | |
| .checkboxControl2 input{ position:absolute; visibility:hidden; } | |
| .checkboxControl2 > div{ | |
| background:-webkit-linear-gradient(top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); | |
| background:linear-gradient(to bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); | |
| height:100%; border-radius:5px; line-height:50px; font-we0 0 3px 0px #F95757 inset, 0 0 12px 6px #F95757tion:relative; z-index:1; cursor:pointer; text-shadow:0 1px rgba(255,255,255,0.5); | |
| } | |
| .checkboxControl2 > div:after{ | |
| content:'Ο'; display:block; height:50%; line-height:4; | |
| transform-origin:0 0; -webkit-transform-origin:0 0; | |
| } | |
| .checkboxControl2 > div:before{ | |
| content:'Ι'; display:block; height:50%; line-height:2.5; | |
| border-radius:80%/5px; | |
| box-shadow:0 8px 12px -13px #89DFED inset, 0 -2px 2px -1px rgba(255,255,255,0.8); | |
| transform-origin:0 100%; -webkit-transform-origin:0 100%; | |
| transform:scaleY(0.7); -webkit-transform:scaleY(0.7); | |
| } | |
| .checkboxControl2 :checked ~ div{ | |
| background:-webkit-linear-gradient(bottom, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); | |
| background:linear-gradient(to top, #002B44 0%, #0690AC 11%, #038EAA 14%, #A0F2FE 58%, #91DBE7 96%, #B9E8E8 100%); | |
| } | |
| .checkboxControl2 :checked ~ div:before{ | |
| border-radius:0; box-shadow:none; | |
| transform:none; -webkit-transform:none; | |
| } | |
| .checkboxControl2 :checked ~ div:after{ | |
| border-radius:80%/5px; | |
| box-shadow:0 -8px 12px -5px #89DFED inset, 0 2px 2px 0 #0690AC; | |
| transform:scaleY(0.7); -webkit-transform:scaleY(0.7); | |
| } | |
| /* the light indicator to the top of the button */ | |
| .checkboxControl2 .indicator{ position:absolute; top:-20px; left:17px; width:25px; height:8px; box-shadow:0 0 8px #000 inset; border:1px solid rgba(255,255,255,0.1); border-radius:15px; transition:0.2s; -webkit-transition:0.2s; } | |
| .checkboxControl2 .indicator:before{ content:''; display:block; margin:2px auto; width:8px; height:5px; border-radius:10px; transition:0.5s; -webkit-transition:0.5s; } | |
| .checkboxControl2 :checked ~ .indicator:before{ box-shadow:0 0 2px 0px #F95757 inset, 0 0 12px 6px #F95757; background:#FFF; transition:0.1s; -webkit-transition:0.1s; } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment