Создайте кнопку с иконкой корзины, показанную на рис. 1.
Рис. 1
Код примера скопирован в буфер
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
.btn {
padding: 1em 2em; /* Расстояние от текста до края */
background-color: #2d2d2d; /* Цвет фона */
color: #fff; /* Белый цвет текста */
border: none; /* Убираем рамку */
border-radius: 3em; /* Кнопка в виде пилюли */
font-size: 0.8em; /* Размер шрифта */
text-transform: uppercase; /* Все буквы заглавные */
}
.btn-cart::before {
content: ''; /* Выводим псевдоэлемент */
display: inline-block; /* Строчно-блочный элемент */
vertical-align: middle; /* Выравнивание по вертикали */
width: 16px; height: 16px; /* Размеры иконки */
margin-right: 1em; /* Расстояние справа */
background: 0/cover url(/example/image/button-cart-white.svg); /* Иконка для кнопки Submit */
}
</style>
</head>
<body>
<p><button class="btn btn-cart">Добавить в корзину</button></p>
</body>
</html>
