Radio by aadium
#212121
1.container input[type="radio"] { 2 position: absolute; 3 opacity: 0; 4 cursor: pointer; 5 height: 0; 6 width: 0; 7} 8 9.container { 10 display: inline-block; 11 position: relative; 12 cursor: pointer; 13 font-size: 17px; 14 width: 4em; 15 height: 4em; 16 user-select: none; 17 border: 4px solid; 18 border-image-slice: 1; 19 background-color: #212121; 20} 21 22label { 23 font-size: 12px; 24 margin-top: -6px; 25 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 26 text-align: center; 27 visibility: visible; 28} 29 30#topleft { 31 border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d); 32 color: white 33} 34 35#topright { 36 border-image-source: linear-gradient(45deg, #743ad5, #d53a9d); 37 color: white 38} 39 40#bottomleft { 41 border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d); 42 color: white 43} 44 45#bottomright { 46 border-image-source: linear-gradient(135deg, #743ad5, #d53a9d); 47 color: white 48} 49 50.selected { 51 position: absolute; 52 top: 0; 53 left: 0; 54 width: 100%; 55 height: 100%; 56} 57 58#topleft:hover { 59 border-image-source: linear-gradient(-45deg, #743ad5, #d53a9d); 60 background-image: linear-gradient(-45deg, #743ad5, #d53a9d); 61} 62 63#topright:hover { 64 border-image-source: linear-gradient(45deg, #743ad5, #d53a9d); 65 background-image: linear-gradient(45deg, #743ad5, #d53a9d); 66} 67 68#bottomleft:hover { 69 border-image-source: linear-gradient(-135deg, #743ad5, #d53a9d); 70 background-image: linear-gradient(-135deg, #743ad5, #d53a9d); 71} 72 73#bottomright:hover { 74 border-image-source: linear-gradient(135deg, #743ad5, #d53a9d); 75 background-image: linear-gradient(135deg, #743ad5, #d53a9d); 76} 77 78#topleft input[type="radio"]:checked ~ .selected { 79 box-shadow: 5px 5px 25px #743ad5, 80 -5px -5px 25px #d53a9d; 81 border-image-slice: 1; 82} 83 84#topright input[type="radio"]:checked ~ .selected { 85 box-shadow: -5px 5px 25px #743ad5, 86 5px -5px 25px #d53a9d; 87 border-image-slice: 1; 88} 89 90#bottomleft input[type="radio"]:checked ~ .selected { 91 box-shadow: -5px 5px 25px #d53a9d, 92 5px -5px 25px #743ad5; 93 border-image-slice: 1; 94} 95 96#bottomright input[type="radio"]:checked ~ .selected { 97 box-shadow: -5px -5px 25px #743ad5, 98 5px 5px 25px #d53a9d; 99 border-image-slice: 1; 100} 101
2.1K views
2.1K views
MIT License