Как можно сверстать такую кнопочку?
Пример
button {
border: 2px solid #000;
border-left: none;
padding: 15px 30px 15px 60px;
border-radius: 10px;
background: #fff;
position: relative;
}
button:before {
content: '';
position: absolute;
top: -2px;
left: 20px;
width: 20px;
height: 2px;
background: #000;
z-index: 1;
}
button i {
background: #fff;
font-size: 50px;
color: #ccc;
position: absolute;
top: 50%;
left: -5px;
transform: translateY(-50%);
}
button:hover {
border-color: #00f;
}
button:hover:before {
background: #00f;
}
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<button><i class="fas fa-lock"></i>Button</button>
Нужно сначала прописать необходимые стили для самой кнопки (какие вам нужны). Далее задать стили для псевдоэлемента этой кнопки:
.btn:before {
content: '';
position: absolute;
z-index: 2;
width: 20px;
height: 20px;
background: #fff url();
}
Виртуальный выделенный сервер (VDS) становится отличным выбором
Как добавить иконки в блок, сделать чтобы все 4 блока были одинаковыми и не разъезжались, когда в них добавляется текст? Желательно с объяснением,...
Есть необходимость добавлять в текст, который отображается в textarea, служебные символыЭти символы не должны быть видны пользователю
Не могу ни как сделать анимацию, чтобы она и поверх кружков тоже бегала