I try to find place to share some css snips, but most of them are needed to pay. So I just share them here, and then you can use jsfiddle or codepen to see its result.
CSS part:
.week-picker-fieldset { display: inline-block; padding: 0 7px; /* background: rgba(0, 0, 0, 0.4); */ border-radius: 5px; -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1); } .week-picker-nav { width: 25px; font-size: 16px; font-weight: bold; color: rgba(0, 0, 0, 0.7); text-align: center; text-decoration: none; text-shadow: 0 1px rgba(255, 255, 255, 0.1); } .week-picker-label, .week-picker-nav { display: inline-block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 25px; vertical-align: top; cursor: pointer; } .week-picker { margin: 100px auto; width: 600px; text-align: center; } .week-picker-fieldset > input { position: absolute; clip: rect(1px, 1px, 1px, 1px); } .week-picker-label, .week-picker-label:before { -webkit-transition: 0.15s ease-out; -moz-transition: 0.15s ease-out; -o-transition: 0.15s ease-out; transition: 0.15s ease-out; } .week-picker-label { position: relative; padding: 0 7px; font-size: 12px; font-weight: 200; color: #8d8ba6; text-transform: uppercase; } input:checked + .week-picker-label { color: white; background: #302e42; background-image: -webkit-linear-gradient(top, #302e42, #29253b); background-image: -moz-linear-gradient(top, #302e42, #29253b); background-image: -o-linear-gradient(top, #302e42, #29253b); background-image: linear-gradient(to bottom, #302e42, #29253b); } input:checked + .week-picker-label:before { opacity: 1; } .week-picker-label:before { content: ''; position: absolute; top: -2px; bottom: -2px; left: -2px; right: -2px; border: 2px solid; border-color: #e4e0fb #b6b1d1 #b6b1d1; border-radius: 6px; opacity: 0; -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); }
HTML part:
<div class="week-picker"> <a href="index.html" class="week-picker-nav" title="Not implemented"><</a> <fieldset class="week-picker-fieldset"> <input type="radio" name="week" value="Mon" id="Mon" checked> <label for="Mon" class="week-picker-label">Mon</label> <input type="radio" name="week" value="Tue" id="Tue"> <label for="Tue" class="week-picker-label">Tue</label> <input type="radio" name="week" value="Wed" id="Wed"> <label for="Wed" class="week-picker-label">Wed</label> <input type="radio" name="week" value="Thr" id="Thr"> <label for="Thr" class="week-picker-label">Thr</label> <input type="radio" name="week" value="Fri" id="Fri"> <label for="Fri" class="week-picker-label">Fri</label> <input type="radio" name="week" value="Sat" id="Sat"> <label for="Sat" class="week-picker-label">Sat</label> <input type="radio" name="week" value="Sun" id="Sun"> <label for="Sun" class="week-picker-label">Sun</label> </fieldset> <a href="index.html" class="week-picker-nav" title="Not implemented">></a> </div>