How to Make Button Tag Only Show Image Inside of it

Question

I have the following code for a submit button on my website:

<button name="searchterm" type="submit" id="searchterm"><img src="images/ICON_Go.jpg"></button> 

and the following CSS:

#searchterm {
    margin:0px;
    padding:0px;
    white-space:nowrap;
    width:auto;
    overflow:visible;
}

Demo

and this is how it appears on the live website:

I would just like it to be the green go image. I do not want the button graphic surrounding the image. How can I do this?

Thank you for any help. All help is appreciated.

Answer 1

Add this to remove the background color and the border:

#searchterm {
    border:0;
    background:transparent.
}

Working Fiddle

Answer 2

Maybe this will fit what you need?

<button name="searchterm" type="submit" id="searchterm"></button> 

    button {
    appearance:none;
    -webkit-appearance:none;
    background-color:transparent;
    border:none;
    outline:none;
    background-image:url('http://i.stack.imgur.com/gojXZ.jpg');
    background-size:40px 34px;
    background-position: 18px 5px;
    padding:22px 38px;
    background-repeat:no-repeat;
    cursor:pointer;
}

DEMO

Answer 3

you need to reset the default styles for a button: button{ border:0; padding:0; outline:0; background:transparent;} and add to your image: {display:block; }

Answer 4

I would think this will be a better approach to calling the image using background-image CSS property.

#searchterm {
  margin:0px;
  padding:0px;
  width:50px;
  height:50px;
  background:url("http://lorempixel.com/50/50") 0 0 no-repeat;
}

/--small alert code which proves this is actual button-/

function myFunction()
{
alert("Hello! I am an alert box!");
}

/-HTML code---/

<button name="searchterm"  type="submit" id="searchterm"  onclick="myFunction()"></button>

this way this will work as actual button. check the Demo. http://jsbin.com/malorefa/1/