Как засунуть картинку в button

Question

Хочу засунуть картинку в кнопку, которая находится в form
Вообще, так можно делать ? Не применяя font awesome

<form action="{{ route('basket-add', $product) }}" method="POST" class="basket">
   <button type="submit" class="button" role="button"><img src="575_original.png" alt=""></button>
</form>

Хочу сделать корзинку так

Весь код выглядит так

.card {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 400px;
  background: #9c9797;
  margin: auto;
}

.card .container {
  width: 100%;
  height: 100%;
}

.card .container .top {
  width: 100%;
  height: 80%;
}

.card .container .top .img_product {
  width: 100%;
  height: 100%;
}

.card .container .button {
  display: flex;
  width: 100%;
  height: 20%;
}

.card .container .button .details {
  width: calc(100% - 60px);
  height: 100%;
  background: #f4f4f4;
}
.card .container .button .basket {
  height: 100%;
  width: 30%;
  border-left: solid thin rgba(0, 0, 0, 0.979);
  background: #f1f1f1;
}

<div class="card">
  <div class="container">
    <div class="top">
      <!--<div class="labels">
               
          </div>-->
    </div>
    <div class="button">
      <div class="details">
        <h3 class="product"> Название товара </h3>
        <p class="prise"> 1200 ₽</p>
        <p>
      </div>
      <form action="{{ route('basket-add', $product) }}" method="POST" class="basket">
        <button type="submit" class="button" role="button"><img src="575_original.png" alt=""></button>
      </form>
    </div>
  </div>
</div>

Answer 1

Вы можете использовать background и расположить изображение как вам удобно. Так же необходимо растянуть кнопку на всю высоту блока.

.card .container .button {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url('https://cdn-icons-png.flaticon.com/512/40/40368.png');
  background-position: center;
  background-size: contain;
  backgrount-repeat: none;
}

.card {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 400px;
  background: #9c9797;
  margin: auto;
}

.card .container {
  width: 100%;
  height: 100%;
}

.card .container .top {
  width: 100%;
  height: 80%;
}

.card .container .top .img_product {
  width: 100%;
  height: 100%;
}

.card .container .button {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url('https://cdn-icons-png.flaticon.com/512/40/40368.png');
  background-position: center;
  background-size: contain;
  backgrount-repeat: none;
}

.card .container .button .details {
  width: calc(100% - 60px);
  height: 100%;
  background: #f4f4f4;
}
.card .container .button .basket {
  height: 100%;
  width: 30%;
  border-left: solid thin rgba(0, 0, 0, 0.979);
  background: #f1f1f1;
}

<div class="card">
  <div class="container">
    <div class="top">
      <!--<div class="labels">
               
          </div>-->
    </div>
    <div class="button">
      <div class="details">
        <h3 class="product"> Название товара </h3>
        <p class="prise"> 1200 ₽</p>
        <p>
      </div>
      <form action="{{ route('basket-add', $product) }}" method="POST" class="basket">
        <button type="submit" class="button" role="button"><img src="575_original.png" alt=""></button>
      </form>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как засунуть картинку в button

Ответы (1 шт):