Подскажите как сверстать кнопку при помощи СSS и HTML% как на картине.
-
2на фон картинку поставьте и не мучайтесь, не выдумывайте– SVECommented 23 июн. 2018 в 13:44
-
@HamSter может он хочет какое то ноу хау– user33274Commented 23 июн. 2018 в 15:19
-
Сверстать можно, но на мой взгляд лучше перевести в svg и просто вставить как картинку. Хотя я бы лучше отказался от такой "симпатичной" кнопки -_-– Vlad BriseCommented 23 июн. 2018 в 16:43
-
А чем кнопка не устраивает?:)– ArthurCommented 23 июн. 2018 в 16:46
-
Ну такие кнопки в последний раз в 2003 использовали, я просто критичный эстет, прошу прощения :)– Vlad BriseCommented 23 июн. 2018 в 17:13
|
Показать ещё 3 комментария
1 ответ
* {
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>
-
Спасибо вам большое– user300933Commented 23 июн. 2018 в 17:13