2

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

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

Ваш ответ

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