We are displaying two radio buttons in page. Click on Radio buttons, it will change background color. Is there any way to improve the quality of the code?
html, body { width: 100%; height: 100%; margin: 0; padding: 0; text-align: center; } body { box-sizing: border-box; padding-top: 180px; background: #ffffff; } input { display: none; } .button { display: inline-block; position: relative; width: 50px; height: 50px; margin: 10px; cursor: pointer; } .button span { display: block; position: absolute; width: 50px; height: 50px; padding: 0; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; background: #eeeeee; box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26); transition: ease .3s; } .button span:hover { padding: 10px; } .orange .button span { background: #FF5722; } .amber .button span { background: #FFC107; } .layer { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: transparent; /*transition: ease .3s;*/ z-index: -1; } .orange input:checked ~ .layer { background: #F4511E; } .amber input:checked ~ .layer { background: #FFB300; }<body> <label class="orange"> <input type="radio" name="color" value="orange"> <div class="layer"></div> <div class="button"><span></span></div> </label> <label class="amber"> <input type="radio" name="color" value="amber"> <div class="layer"></div> <div class="button"><span></span></div> </label> </body>
