Как можно сверстать такую кнопочку?
2 ответа
Пример
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();
}
-
А бордер под картинкой виден не будет? Мне кажется внутри замочка будет бордер проходить. Картинка то png– finchdevCommented 15 авг. 2018 в 17:51
-
border-image