Button with image - html

Question

I have this code:
.subbmitCommentBtn {
background: url("../images/ikon2.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: left;
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class=" subbmitCommentBtn">
I need to add more space on the left. I would like the picture to move away from the left edge of the button (ex. padding left:10px).
How to fix it?

Answer 1

You need to set the background-position rather than the padding. By default, the background also covers the padding, so changing the padding doesn't influence that.
.subbmitCommentBtn {
background: url("https://i.stack.imgur.com/HOZcL.png") no-repeat center top;
padding-right: 15px;
padding-left: 15px;
color: white;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #AF191F;
background-position: 10px top; /* changed from "left" */
background-repeat: no-repeat;
font-weight: bold;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">
Please note that I also had to change the background image URL for the purpose of this snippet, so don't copy the whole bunch over.

Answer 2

Use background-position to get padding effect. An example below:
.subbmitCommentBtn {
background: url("https://cdn.pixabay.com/photo/2018/02/04/01/54/paper-planes-3128885_1280.png") no-repeat; /* added an image for snippet */
background-size: 40px 40px; /* set background-size: 40px width and 40px height */
background-position: 15px center; /* left:15px and vertical-align:middle */
color: #f4f6f9;
cursor: pointer;
height: 56px;
width: 253px;
background-color: #d94452;
font-weight: bold;
letter-spacing: 1px;
border-radius: 20px;
border: none;
}
<input type="submit" value="Dodaj komentarz" class="subbmitCommentBtn">