Stylish switch design.
Inspired by this Dribbble shot: https://dribbble.com/shots/299416-Simple-Switch
A Pen by Håvard Brynjulfsen on CodePen.
Created
May 20, 2016 13:28
-
-
Save anonymous/2b805d0f52efb7290f425fe81b3048fd to your computer and use it in GitHub Desktop.
Daily UI #11 | Switch | CSS only
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
| <label> | |
| <input type="checkbox" checked/> | |
| <div> | |
| <span class="on">On</span> | |
| <span class="off">Off</span> | |
| </div> | |
| <i></i> | |
| </label> |
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
| *, *:before, *:after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 18px; | |
| } | |
| body { | |
| font-family: "Open Sans", sans-serif; | |
| font-size: 1em; | |
| line-height: 1.6; | |
| background: #dbdbdb; | |
| } | |
| label { | |
| display: block; | |
| width: 160px; | |
| margin: 150px auto; | |
| background: #CCC; | |
| height: 80px; | |
| border-radius: 40px; | |
| background: linear-gradient(to bottom, #9e9e9e 30%, #f4f4f4); | |
| box-shadow: 0 2px 0 0 #fff, 0 -2px 0 0 #969494; | |
| position: relative; | |
| // Remove mobile tab color | |
| -webkit-tap-highlight-color: rgba(255, 255, 255, 0); | |
| input { | |
| display: none; | |
| } | |
| div { | |
| display: block; | |
| width: 120px; | |
| height: 50px; | |
| position: absolute; | |
| left: 50%; | |
| top: 50%; | |
| transform: translate(-50%, -50%); | |
| background: linear-gradient(to bottom, #8b8c8e 20%, #f4f4f4); | |
| border-radius: 25px; | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| height: 46px; | |
| width: 116px; | |
| left: 2px; | |
| top: 2px; | |
| border-radius: 23px; | |
| background: #828080; | |
| box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.8); | |
| transition: .20s; | |
| } | |
| } | |
| i { | |
| display: block; | |
| width: 60px; | |
| height: 60px; | |
| position: absolute; | |
| background: linear-gradient(to top, #9e9e9e 20%, #f4f4f4); | |
| border-radius: 50%; | |
| box-shadow: 0 5px 10px 0 rgba(0,0,0,0.7); | |
| top: 10px; | |
| left: 15px; | |
| transition: .25s; | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 52px; | |
| height: 52px; | |
| left: 4px; | |
| top: 4px; | |
| border-radius: 50%; | |
| background: #d5d4d4; | |
| z-index: 1; | |
| } | |
| } | |
| input:checked ~ i { | |
| top: 10px; | |
| left: 86px; | |
| } | |
| input:checked + div:after { | |
| background: #f7931e; | |
| box-shadow: inset 0 0 30px 0 rgba(0,0,0,0.6); | |
| } | |
| input:checked + div > .off { | |
| color: transparent; | |
| text-shadow: 0 1px 0 rgba(255,255,255,0); | |
| } | |
| input:checked + div > .on{ | |
| color: #c6631d; | |
| text-shadow: 0 1px 0 rgba(255,255,255, 0.3); | |
| } | |
| // LABEL GRADIENT BORDER | |
| &:after { | |
| content: ""; | |
| position: absolute; | |
| display: block; | |
| width: 164px; | |
| height: 84px; | |
| border-radius: 42px; | |
| background: red; | |
| top: -2px; | |
| left: -2px; | |
| z-index: -1; | |
| background: linear-gradient(to bottom, #969494, #fff); | |
| } | |
| &:hover { | |
| cursor: pointer; | |
| } | |
| &:focus, &:active { | |
| outline: 0; | |
| } | |
| } | |
| .on, .off { | |
| text-transform: uppercase; | |
| position: absolute; | |
| left: 17px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 1.2em; | |
| font-weight: 600; | |
| z-index: 2; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| letter-spacing: 1px; | |
| transition: .25s; | |
| } | |
| .on { | |
| color: transparent; | |
| text-shadow: 0 1px 0 rgba(255,255,255,0); | |
| } | |
| .off { | |
| left: initial; | |
| right: 17px; | |
| color: #444; | |
| text-shadow: 0 1px 0 rgba(255,255,255, 0.2); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment