2.1K views
1.container { 2 width: 7em; 3 height: 7em; 4 position: relative; 5} 6 7.button { 8 position: absolute; 9 width: 100%; 10 height: 100%; 11 border-radius: 50%; 12 border: 4px solid #090909; 13 background-color: transparent; 14 background-image: linear-gradient(145deg, #171717, #444245); 15 box-sizing: border-box; 16 box-shadow: inset 2px 2px 0 #7d7c7e, inset -2px -2px 0px #1c1c1c; 17 display: flex; 18 align-items: center; 19 justify-content: center; 20} 21 22.container input { 23 display: none; 24} 25 26.button::before { 27 position: absolute; 28 content: ""; 29 width: 7.25em; 30 height: 7.25em; 31 border-radius: inherit; 32 background-color: transparent; 33 background-image: linear-gradient(145deg, #262626, #606060); 34 z-index: -1; 35 box-shadow: 11px 11px 22px #141414, -11px -11px 22px #525252; 36} 37 38.button .icon { 39 width: 60px; 40 height: 60px; 41 display: inline-block; 42} 43 44.button .icon svg { 45 height: 100%; 46 width: 100%; 47 fill: #a5a5a5; 48} 49 50.container input:checked + .button { 51 box-shadow: inset -2px -2px 0 #5e5e5e,inset 2px 2px 0 #1c1c1c; 52 border: 4px solid rgba(77, 124, 255, 0.281); 53 animation: animeBorder .3s linear alternate-reverse infinite; 54} 55 56.container input:checked + .button .icon svg { 57 fill: rgb(77, 124, 255); 58 animation: animeFill .3s linear alternate-reverse infinite; 59} 60 61@keyframes animeFill { 62 to { 63 fill: rgba(77, 124, 255, 0.642); 64 } 65} 66 67@keyframes animeBorder { 68 to { 69 border-color: rgba(77, 124, 255, 0.137); 70 } 71}
MIT License