В предыдущем посте мы делали такие же чекбоксы, но с другим дизайном и эффектом. Посмотреть другой вариант оформления этих же чекбоксов можно по этой ссылке.
Подключаем Font Awesome (иконочный шрифт)
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Важно! Подключаем иконочный шрифт перед файлом со стилям
style.css
HTML
<ul>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-phone"></i>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-plane"></i>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-moon-o"></i>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-wifi"></i>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-volume-up"></i>
</div>
</label>
</li>
<li>
<label>
<input type="checkbox" name="">
<div class="icon-box">
<i class="fa fa-bluetooth-b"></i>
</div>
</label>
</li>
</ul>
CSS
ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
border: 3px solid #000;
border-radius: 10px;
padding: 20px 0;
overflow: hidden;
width: 240px;
background: linear-gradient(0deg, #000, #0c0c0c);
}
ul::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, .05);
bottom: -50%;
pointer-events: none;
z-index: 1;
}
ul li {
position: relative;
list-style: none;
text-align: center;
margin: 15px;
}
ul li label {
position: relative;
cursor: pointer;
}
ul li label input[type="checkbox"] {
position: absolute;
opacity: 0;
}
ul li label .icon-box {
width: 60px;
height: 60px;
background: #101010;
display: flex;
justify-content: center;
align-items: center;
border: 3px solid #000;
border-radius: 10px;
transition: 0.5s;
}
ul li label .icon-box .fa {
font-size: 30px;
color: #222222;
transition: 0.5s;
}
ul li label input[type="checkbox"]:checked~.icon-box {
background: #000;
border: 3px solid #fff;
box-shadow: 0 0 10px rgba(33, 156, 243, .5),
0 0 20px rgba(33, 156, 243, .5),
0 0 30px rgba(33, 156, 243, .5),
inset 0 0 10px rgba(33, 156, 243, 1);
}
ul li label input[type="checkbox"]:checked~.icon-box .fa {
color: #ffffff;
text-shadow: 0 0 10px rgba(33, 156, 243, 1),
0 0 10px rgba(33, 156, 243, 1);
}
