How to style a button that displays as an image - php

Question

I have the following code:
#a img {
display: inline-block;
width: 14em;
margin-top: 20px;
float: left;
}
#a {
display: inline-block;
width: 14em;
margin-left: 3%;
margin-top: 20px;
float: left;
}
<button id='a' name='a' value='x'><img src='../../files/images/someimage.png' alt='text'></button>
This displays my image inside a grey box like a button. Is there a way to get ride of the grey box around it?
As I just want to display the image with the same functions as a button
Any help welcome

Answer 1

Something like this, you just need to remove default properties of button
#a{
background:none;
border:0;
outline:0;
}
<button id='a' name='a' value='x'><img src='../../files/images/someimage.png' alt='text'></button>

Answer 2

<button id='a' name='a' value='x'><img src='submit.gif' alt='text'></button>
<style>
button{
background:transparent;
border:none
}
<style>
You can specify background transparent for the button. If you want you can use input type="image" .

Answer 3

button {
background: url("http://placehold.it/200x50");
background-size: cover;
width: 200px;
height: 50px;
cursor: pointer;
}
button:hover {
border: thin solid red;
}
<button></button>

Answer 4

you can do via border:none. Just add it to your css
#a { display:inline-block; width:14em; margin-left:3%; margin-top:20px; float:left; border: none; outline: 0; background: none }
#a:focus, #a:hover { border: none; outline: 0; background: none }