Как сделать такую же форму отправки с картинкой вместо кнопки?

Question

.box2 {
  width: 800px;
  height: 855px;
  background-color: #ff5f60;
}

input.email {
  margin: 80px 0px 0px 80px;
  width: 240px;
  height: 45px;
  background-color: #ffffff;
  border: none;
  border-radius: 30px;
  outline: none;
}

input.email::placeholder {
  text-align: center;
  color: #a9a5a5;
  font-size: 13px;
  font-weight: 400;
}

input.email_button {
  height: 45px;
  width: 60px;
  border: none;
  background-color: #1f3148;
}

<div class="box2">
  <form class="send" id="send-email">
    <input class="email" type="text" placeholder="Enter your email ....">
    <input class="email_button" type="image" src="https://i.postimg.cc/9XKLLbm4/send-icon.png">
  </form>
</div>

Пытался сделать так, но если увеличивать размер, то увеличивается и фото

Answer 1

чуть причесал - только картинку выберите нормального размера

.box2 {
  width: 800px;
  height: 855px;
  background-color: #ff5f60;
  
  padding:  50px;
}

.send {
  display:        inline-flex;
  
  height:         45px;
  
  font-size:      0px;
}

input.email {
  padding:        0px 30px 0px 30px;
  margin:         0px;
  
  width:          240px;
  height:         45px;
  
  line-height:    45px;

  border-top-left-radius:  30px;
  border-bottom-left-radius:  30px;

  background-color: #ffffff;
  border:         none;
  outline:        none;
}

input.email::placeholder {
  text-align:     center;
  color:          #a9a5a5;
  font-size:      13px;
  font-weight:    400;
}

input.email_button {
  width:          60px;
  height:         45px;
  
  border-top-right-radius:  30px;
  border-bottom-right-radius:  30px;

  background-color: #1f3148;
  background-image: url('https://www.pinclipart.com/picdir/big/35-359468_here-clipart-hand-pointer-click-here-hand-icon.png');
  background-size:  25px;
  background-repeat: no-repeat;
  background-position: center;
  
  border:         none;
  outline:        none;
  
  cursor:         pointer;
}

<div class="box2">
  <form class="send" id="send-email">
    <input class="email" type="text" placeholder="Enter your email ....">
    <input class="email_button">
  </form>
</div>

БЛОГ НА HUSL

Как сделать такую же форму отправки с картинкой вместо кнопки?

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