808 views
1.input { 2 -webkit-appearance: none; 3 /* remove default */ 4 display: block; 5 margin: 10px; 6 width: 24px; 7 height: 24px; 8 border-radius: 12px; 9 cursor: pointer; 10 vertical-align: middle; 11 box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px; 12 background-color: hsla(0,0%,0%,.2); 13 background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% ); 14 background-repeat: no-repeat; 15 -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1), 16 -webkit-transform .25s cubic-bezier(.8, 0, 1, 1); 17 outline: none; 18} 19 20.input:checked { 21 -webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1), 22 -webkit-transform .25s cubic-bezier(0, 0, .2, 1); 23} 24 25.input:active { 26 -webkit-transform: scale(1.5); 27 -webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1); 28} 29 30 31 32/* The up/down direction logic */ 33 34.input, 35.input:active { 36 background-position: 0 24px; 37} 38 39.input:checked { 40 background-position: 0 0; 41} 42 43.input:checked ~ .input, 44.input:checked ~ .input:active { 45 background-position: 0 -24px; 46}
Shoh2008
c0der
I'm Shoxruh. I'm Tajik. I can speak Russian, Uzbek, English. I live in Uzbekistan I was finishing an IT course. Experience as a Junior, front-end developer.
MIT License