Radio by Ratinax
#212121
1.radio-input { 2 display: flex; 3 scale: 0.15; 4 transform: rotate(180deg); 5} 6 7.star { 8 margin: 1em; 9 appearance: none; 10 --color: white; 11 border-left: 6.4721359549996em solid transparent; 12 border-right: 6.4721359549996em solid transparent; 13 border-bottom: 4em solid var(--color); 14 transform: rotate(0deg); 15 cursor: pointer; 16} 17 18.star:before { 19 content: ""; 20 border-left: 6.4721359549996em solid transparent; 21 border-right: 6.4721359549996em solid transparent; 22 border-top: 4em solid var(--color); 23 position: absolute; 24 left: -6.4721359549996em; 25 transform: rotate(108deg); 26} 27 28.star:after { 29 content: ""; 30 border-left: 6.4721359549996em solid transparent; 31 border-right: 6.4721359549996em solid transparent; 32 border-top: 4em solid var(--color); 33 position: absolute; 34 left: -6.4721359549996em; 35 transform: rotate(253deg); 36} 37 38.radio-input > .star:hover ~ .star, 39.radio-input > .star:hover, 40.radio-input > .star:checked ~ .star, 41.radio-input > .star:checked { 42 --color: yellow; 43} 44 45.radio-input > .star:checked ~ .star, 46.radio-input > .star:checked { 47 animation: grow 0.5s linear forwards; 48 transition: transform 0.3s; 49} 50 51@keyframes grow { 52 50% { 53 scale: 2; 54 } 55} 56
1.1K views
Variation of aradio
MIT License