Красивая реализация эффекта при переключении радиокнопок: при клике иконка кнопки начинает светиться неоновой подсветкой, а сама кнопка приобретает эффект вдавленности.
HTML
Подключаем Font Awesome перед нашим файлом со стилями
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
<p>Do you know javascript?</p>
<div>
<label>
<input type="radio" name="programmer">
<i class="fa fa-check"></i>
</label>
<label>
<input type="radio" name="programmer">
<i class="fa fa-times"></i>
</label>
</div>
</div>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #091921;
}
.container {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container p {
color: #215e65;
font-size: 20px;
font-weight: 500;
margin-bottom: 15px;
}
.container label {
position: relative;
}
.container label input {
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.container label .fa {
position: relative;
width: 40px;
height: 40px;
background: #091921;
line-height: 40px;
text-align: center;
margin: 0 4px;
color: #6f6f6f;
border-radius: 50%;
cursor: pointer;
box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8);
}
.container label .fa:hover {
box-shadow: -1px -1px 3px rgba(255, 255, 255, 0.1),
2px 2px 6px rgba(0, 0, 0, 0.8),
inset -2px -2px 10px rgba(255, 255, 255, 0.05),
inset 2px 2px 10px rgba(0, 0, 0, 0.5)
}
.container label input:checked~.fa {
color: #00fff1;
box-shadow: inset -1px -1px 3px rgba(255, 255, 255, 0.1),
inset 2px 2px 6px rgba(0, 0, 0, 1);
text-shadow: 0 0 5px #00fff1,
0 0 20px #00fff1;
}
