2

введите сюда описание изображения

Как можно сверстать такую кнопочку?

1
  • border-image
    – Qwertiy
    Commented 15 авг. 2018 в 17:54

2 ответа 2

3

Пример

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>

0

Нужно сначала прописать необходимые стили для самой кнопки (какие вам нужны). Далее задать стили для псевдоэлемента этой кнопки:

.btn:before {
  content: '';
  position: absolute;
  z-index: 2;
  width: 20px;
  height: 20px;
  background: #fff url();
}
2
  • А бордер под картинкой виден не будет? Мне кажется внутри замочка будет бордер проходить. Картинка то png
    – finchdev
    Commented 15 авг. 2018 в 17:51
  • отредактировал ответ, посмотрите Commented 15 авг. 2018 в 17:53

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.