263 views
1.radio-input { 2 display: flex; 3 flex-direction: row; 4 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 5 font-size: 16px; 6 font-weight: 600; 7} 8 9.radio-input input[type="radio"] { 10 display: none; 11} 12 13.radio-input label { 14 display: flex; 15 align-items: center; 16 padding: 10px; 17 border: 1px solid #ccc; 18 background-color: #212121; 19 border-radius: 5px; 20 margin-right: 12px; 21 cursor: pointer; 22 position: relative; 23 transition: all 0.3s ease-in-out; 24} 25 26.radio-input label:before { 27 content: ""; 28 display: block; 29 position: absolute; 30 top: 50%; 31 left: 0; 32 transform: translate(-50%, -50%); 33 width: 10px; 34 height: 10px; 35 border-radius: 50%; 36 background-color: #fff; 37 border: 2px solid #ccc; 38 transition: all 0.3s ease-in-out; 39} 40 41.radio-input input[type="radio"]:checked + label:before { 42 background-color: green; 43 top: 0; 44} 45 46.radio-input input[type="radio"]:checked + label { 47 background-color: royalblue; 48 color: #fff; 49 border-color: rgb(129, 235, 129); 50 animation: radio-translate 0.5s ease-in-out; 51} 52 53@keyframes radio-translate { 54 0% { 55 transform: translateX(0); 56 } 57 58 50% { 59 transform: translateY(-10px); 60 } 61 62 100% { 63 transform: translateX(0); 64 } 65} 66
MIT License