How to make a button with image inside? - html

Question

I want to make a buttons that looks like:
I tried this:
css:
button {
color: #900;
border: 1px solid #900;
font-weight: bold;
width: 200px;
height: 100px;
}
button img {
margin-right: 5px;
vertical-align: middle;
}
html:
<button class="btnExample" type="submit" value="Submit">
<img src="./images/img04.jpg" width="18" height="18" alt=""/>Submit</button>
And result:
Why image so small(18*18px)? How to make image bigger?

Answer 1

change this to increase size
<img src="./images/img04.jpg" width="28" height="28" alt=""/>Submit</button>
to change size change width=" " and for height=" "
button {
color: #900;
border: 1px solid #900;
font-weight: bold;
width: 200px;
height: 100px;
}
button img {
margin-right: 5px;
vertical-align: middle;
}
<button class="btnExample" type="submit" value="Submit">
<img src="http://4vector.com/i/free-vector-kuba-arrow-button-set-clip-art_117492_Kuba_Arrow_Button_Set_clip_art_hight.png" width="58" height="58" alt=""/>Submit</button>

Answer 2

The image is as big as you make it. From your comments, it seems that the actual size of the image is 18 by 18 pixels. I would be possible to stretch it by setting larger values for the width and height attributes or by setting the width and height properties to suitable values in CSS. However, scaling upwards may produce graphically poor results for raster images like jpeg images.
It is therefore better to use a graphics program to create the image in the desired size and change the width and height attributes to match the new size.