2

Подскажите как сверстать кнопку при помощи СSS и HTML% как на картине. введите сюда описание изображения

8
  • 2
    на фон картинку поставьте и не мучайтесь, не выдумывайте
    – SVE
    23 июн 2018 в 13:44
  • @HamSter может он хочет какое то ноу хау
    – user33274
    23 июн 2018 в 15:19
  • Сверстать можно, но на мой взгляд лучше перевести в svg и просто вставить как картинку. Хотя я бы лучше отказался от такой "симпатичной" кнопки -_-
    – Vlad Brise
    23 июн 2018 в 16:43
  • А чем кнопка не устраивает?:)
    – Arthur
    23 июн 2018 в 16:46
  • Ну такие кнопки в последний раз в 2003 использовали, я просто критичный эстет, прошу прощения :)
    – Vlad Brise
    23 июн 2018 в 17:13

1 ответ 1

2

* {
  box-sizing: border-box;
}

body {
  padding: 25px;
}

.btn-cart {
  display: inline-block;
  background: #FB911F;
  color: #fff;
  padding: 10px 25px 10px 75px;
  position: relative;
  border-radius: 0 7px 7px 0;
}

.btn-cart:before {
  content: 'Icon';
  position: absolute;
  top: 50%;
  left: -10px;
  width: 70px;
  height: 70px;
  line-height: 64px;
  margin-top: -35px;
  text-align: center;
  border-radius: 50%;
  background: #fff;
  color: #FB911F;
  border: 6px solid #FB911F;
  box-sizing: border-box;
}

.btn-cart:hover {
  background: #00f;
}

.btn-cart:hover:before {
  border-color: #00f;
  color: #00f;
}
<a href="#" class="btn-cart">Корзина (0)</a>

1
  • Спасибо вам большое 23 июн 2018 в 17:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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