This post is saved as a draft.
#e8e8e8
1.radio-component { 2 display: flex; 3 padding: 15px; 4 cursor: pointer; 5 transition: 0.3s; 6} 7 8.radiostyle { 9 display: none; 10} 11 12.radioTxt1 { 13 padding: 10px 40px; 14 color: #fd9800; 15 font-size: 20px; 16 text-transform: uppercase; 17 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 18} 19 20.radioTxt2 { 21 padding: 10px 40px; 22 color: #7e7e7e; 23 font-size: 20px; 24 text-transform: uppercase; 25 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 26} 27 28.radioTxt3 { 29 padding: 10px 40px; 30 color: #181818; 31 font-size: 20px; 32 text-transform: uppercase; 33 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 34} 35 36.radio-component .RadioBtn:hover { 37 background: #ffdf6a; 38 border-radius: 100px; 39} 40 41.radio-component .RadioBtn2:hover { 42 background: #cacaca; 43 border-radius: 100px; 44} 45 46.radio-component .RadioBtn3:hover { 47 background: #313239; 48 border-radius: 100px; 49} 50 51.radiostyle:checked~ .RadioBtn { 52 display: inline-block; 53 position: relative; 54 z-index: 1; 55 top: 3px; 56 left: 30px; 57 width: 44px; 58 height: 44px; 59 background-color: #ffd401; 60 border-radius: 50px; 61 box-shadow: 0 2px 6px rgba(0, 0, 0, .3); 62 transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 63 transform: rotate(-45deg); 64} 65 66.radiostyle:checked~ .RadioBtn2 { 67 display: inline-block; 68 position: relative; 69 z-index: 1; 70 top: 3px; 71 left: 30px; 72 width: 44px; 73 height: 44px; 74 background-color: #e8e8e8; 75 border-radius: 50px; 76 box-shadow: 0 2px 6px rgba(0, 0, 0, .3); 77 transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 78 transform: rotate(-45deg); 79} 80 81.radiostyle:checked~ .RadioBtn3 { 82 display: inline-block; 83 position: relative; 84 z-index: 1; 85 top: 3px; 86 left: 30px; 87 width: 44px; 88 height: 44px; 89 background-color: #000; 90 border-radius: 50px; 91 box-shadow: 0 2px 6px rgba(255, 255, 255, .3); 92 transition: all 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55); 93 transform: rotate(-45deg); 94} 95 96.RadioBtn .crater { 97 position: absolute; 98 background-color: #ffbb00; 99 opacity: 1; 100 transition: opacity 200ms ease-in-out; 101 border-radius: 100%; 102} 103 104.RadioBtn2 .crater { 105 position: absolute; 106 background-color: #b4b4b4; 107 opacity: 1; 108 transition: opacity 200ms ease-in-out; 109 border-radius: 100%; 110} 111 112.RadioBtn3 .crater { 113 position: absolute; 114 background-color: #2e2f33; 115 opacity: 1; 116 transition: opacity 200ms ease-in-out; 117 border-radius: 100%; 118} 119 120.radio-component .Krt1 { 121 top: 18px; 122 left: 10px; 123 width: 4px; 124 height: 4px; 125} 126 127.radio-component .Krt2 { 128 top: 28px; 129 left: 22px; 130 width: 6px; 131 height: 6px; 132} 133 134.radio-component .Krt3 { 135 top: 10px; 136 left: 25px; 137 width: 8px; 138 height: 8px; 139} 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154
Variation of aradio
Variation of aradio