77 views
CSS
1.container { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5} 6 7.radio-tile-group { 8 display: flex; 9 flex-wrap: wrap; 10 justify-content: center; 11} 12 13.radio-tile-group .input-container { 14 position: relative; 15 height: 80px; 16 width: 80px; 17 margin: 0.5rem; 18} 19 20.radio-tile-group .input-container .radio-button { 21 opacity: 0; 22 position: absolute; 23 top: 0; 24 left: 0; 25 height: 100%; 26 width: 100%; 27 margin: 0; 28 cursor: pointer; 29} 30 31.radio-tile-group .input-container .radio-tile { 32 display: flex; 33 flex-direction: column; 34 align-items: center; 35 justify-content: center; 36 width: 100%; 37 height: 100%; 38 border: 2px solid #079ad9; 39 border-radius: 5px; 40 padding: 1rem; 41 transition: transform 300ms ease; 42} 43 44.radio-tile-group .input-container .icon svg { 45 fill: #079ad9; 46 width: 2rem; 47 height: 2rem; 48} 49 50.radio-tile-group .input-container .radio-tile-label { 51 text-align: center; 52 font-size: 0.75rem; 53 font-weight: 600; 54 text-transform: uppercase; 55 letter-spacing: 1px; 56 color: #079ad9; 57} 58 59.radio-tile-group .input-container .radio-button:checked + .radio-tile { 60 background-color: #079ad9; 61 border: 2px solid #079ad9; 62 color: white; 63 transform: scale(1.1, 1.1); 64} 65 66.radio-tile-group .input-container .radio-button:checked + .radio-tile .icon svg { 67 fill: white; 68 background-color: #079ad9; 69} 70 71.radio-tile-group .input-container .radio-button:checked + .radio-tile .radio-tile-label { 72 color: white; 73 background-color: #079ad9; 74} 75
HTML
1<div class="container"> 2 <div class="radio-tile-group"> 3 <div class="input-container"> 4 <input id="walk" class="radio-button" type="radio" name="radio"> 5 <div class="radio-tile"> 6 <div class="icon walk-icon"> 7 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 8 <path d="M0 0h24v24H0z" fill="none"></path> 9 <path d="M13.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM9.8 8.9L7 23h2.1l1.8-8 2.1 2v6h2v-7.5l-2.1-2 .6-3C14.8 12 16.8 13 19 13v-2c-1.9 0-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1-.3 0-.5.1-.8.1L6 8.3V13h2V9.6l1.8-.7"></path> 10 </svg> 11 </div> 12 <label for="walk" class="radio-tile-label">Walk</label> 13 </div> 14 </div> 15 16 <div class="input-container"> 17 <input id="bike" class="radio-button" type="radio" name="radio"> 18 <div class="radio-tile"> 19 <div class="icon bike-icon"> 20 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 21 <path d="M0 0h24v24H0z" fill="none"></path> 22 <path d="M15.5 5.5c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zM5 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5zm5.8-10l2.4-2.4.8.8c1.3 1.3 3 2.1 5.1 2.1V9c-1.5 0-2.7-.6-3.6-1.5l-1.9-1.9c-.5-.4-1-.6-1.6-.6s-1.1.2-1.4.6L7.8 8.4c-.4.4-.6.9-.6 1.4 0 .6.2 1.1.6 1.4L11 14v5h2v-6.2l-2.2-2.3zM19 12c-2.8 0-5 2.2-5 5s2.2 5 5 5 5-2.2 5-5-2.2-5-5-5zm0 8.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"></path> 23 </svg> 24 </div> 25 <label for="bike" class="radio-tile-label">Bike</label> 26 </div> 27 </div> 28 29 <div class="input-container"> 30 <input id="drive" class="radio-button" type="radio" name="radio"> 31 <div class="radio-tile"> 32 <div class="icon car-icon"> 33 <svg fill="#000000" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"> 34 <path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.21.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"></path> 35 <path d="M0 0h24v24H0z" fill="none"></path> 36 </svg> 37 </div> 38 <label for="drive" class="radio-tile-label">Drive</label> 39 </div> 40 </div> 41 </div> 42</div> 43