<div class="container">
<form>
<label>
<input type="radio" name="radio" checked/>
<span>HTML</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>CSS</span>
</label>
<label>
<input type="radio" name="radio"/>
<span>Javascript</span>
</label>
</form>
</div>
*,
*:after,
*:before {
box-sizing: border-box;
}
$primary-color: #00005c; // Change color here. C'mon, try it!
$text-color: mix(#000, $primary-color, 64%);
body {
font-family: "Inter", sans-serif;
color: $text-color;
font-size: calc(1em + 1.25vw);
background-color: mix(#fff, $primary-color, 90%);
}
form {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
label {
display: flex;
cursor: pointer;
font-weight: 500;
position: relative;
overflow: hidden;
margin-bottom: 0.375em;
/* Accessible outline */
/* Remove comment to use */
/*
&:focus-within {
outline: .125em solid $primary-color;
}
*/
input {
position: absolute;
left: -9999px;
&:checked + span {
background-color: mix(#fff, $primary-color, 84%);
&:before {
box-shadow: inset 0 0 0 0.4375em $primary-color;
}
}
}
span {
display: flex;
align-items: center;
padding: 0.375em 0.75em 0.375em 0.375em;
border-radius: 99em; // or something higher...
transition: 0.25s ease;
&:hover {
background-color: mix(#fff, $primary-color, 84%);
}
&:before {
display: flex;
flex-shrink: 0;
content: "";
background-color: #fff;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
margin-right: 0.375em;
transition: 0.25s ease;
box-shadow: inset 0 0 0 0.125em $primary-color;
}
}
}
// Codepen spesific styling - only to center the elements in the pen preview and viewport
.container {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
// End Codepen spesific styling
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.