Checkbox by TISEPSE
#212121
1.checkbox-label { 2 font-size: 22px; 3 color: #fefefe; 4 padding: 10px 50px 10px 5px; 5 font-family: Arial, Helvetica, sans-serif; 6 user-select: none; 7 display: flex; 8 position: relative; 9 align-items: center; 10 transition: all 0.3s; 11} 12 13.checkbox { 14 width: 35px; 15 height: 35px; 16 cursor: pointer; 17 margin-right: -22px; 18 appearance: none; 19 border-radius: 5px; 20 background-color: #64ccc5; 21 z-index: 2; 22 transition: all 0.3s; 23} 24 25.container { 26 width: 35px; 27 height: 35px; 28 position: relative; 29 top: 4px; 30 left: -8%; 31 border-radius: 5px; 32 background-color: #dafffb; 33 transition: all 0.3s; 34} 35 36.checkbox::before { 37 content: ""; 38 background-color: #ffc8c8; 39 position: relative; 40 display: flex; 41 top: 45%; 42 left: 50%; 43 width: 55px; 44 height: 3px; 45 border-radius: 25px; 46 transform: translate(100px, 0px) scale(0); 47 transition: ease-out 0.15s; 48} 49 50.checkbox:checked::before { 51 transform: translateX(2em); 52 top: 12px; 53 transition: ease-out 0.15s; 54} 55 56.checkbox:hover { 57 transform: translate(4px, 4px); 58 transition: ease-out 0.15s; 59 background-color: #ffc8c8; 60} 61 62.checkbox:checked { 63 transform: translate(4px, 4px); 64 transition: ease-out 0.15s; 65 background-color: #ffc8c8; 66} 67 68.svg-icon { 69 position: absolute; 70 width: 25px; 71 height: 25px; 72 display: flex; 73 z-index: 3; 74 top: 35%; 75 left: 11%; 76 color: #fefefe; 77 font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 78 transform: rotate(0deg) scale(0); 79 transition: ease-in 0.2s; 80} 81 82.checkbox:checked ~ .svg-icon { 83 transform: rotate(360deg) scale(1); 84 transition: ease-in 0.2s; 85} 86
895 views
895 views
Uncannypotato69 3. March at 13:36
3. March at 13:36
it's beautiful. The way they go down. really cool. THUMBS UP!!!
TISEPSE 3. March at 13:53
3. March at 13:53
@Uncannypotato69 Thank you very much! I'm very happy that you appreciate my work.
MIT License