Radio by Spacious74
#e8e8e8
1.radio-inputs { 2 position: relative; 3 display: flex; 4 border-radius: 0.5rem; 5 background-color: #70c489; 6 box-sizing: border-box; 7 font-size: 14px; 8 width: 90%; 9 padding: 1rem 1rem 0 1rem; 10} 11 12.radio-inputs .radio input { 13 display: none; 14} 15 16.radio-inputs .radio .name { 17 display: flex; 18 cursor: pointer; 19 align-items: center; 20 justify-content: center; 21 border-top-left-radius: 0.5rem; 22 border-top-right-radius: 0.5rem; 23 border: none; 24 padding: 0.5rem 0.8rem; 25 color: ; 26 transition: all 0.15s ease-in-out; 27 position: relative; 28} 29 30.radio-inputs .radio input:checked + .name { 31 background-color: #e8e8e8; 32 font-weight: 600; 33} 34.radio-inputs .radio input + .name:hover { 35 color: #fff; 36} 37.radio-inputs .radio input:checked + .name:hover { 38 color: #1d1d29; 39} 40 41.radio-inputs .radio input:checked + .name::after, 42.radio-inputs .radio input:checked + .name::before { 43 content: ""; 44 position: absolute; 45 width: 10px; 46 height: 10px; 47 background-color: #70c489; 48 bottom: 0; 49} 50 51.radio-inputs .radio input:checked + .name::after { 52 right: -10px; 53 border-bottom-left-radius: 300px; 54 box-shadow: -3px 3px 0px 3px #e8e8e8; 55} 56.radio-inputs .radio input:checked + .name::before { 57 left: -10px; 58 border-bottom-right-radius: 300px; 59 box-shadow: 3px 3px 0px 3px #e8e8e8; 60} 61
335 views
335 views
MIT License