How to Change an Input Button Image Using Css

How to change an input button image using CSS

If you're wanting to style the button using CSS, make it a type="submit" button instead of type="image". type="image" expects a SRC, which you can't set in CSS.

Note that Safari won't let you style any button in the manner you're looking for. If you need Safari support, you'll need to place an image and have an onclick function that submits the form.

HTML / CSS How to add image icon to input type= button ?

If you absolutely must use input, try this:

background-image: url(...);
background-repeat: no-repeat;
background-position: <left|right>;
padding-<left|right>: <width of image>px;

It's usually a little easier to use a button with an img inside:

<button type="submit"><img> Text</button>

However the browser implementations of button for submitting are inconsistent, as well as the fact that all button values are sent when button is used - which kills the "what button clicked" detection in a multi-submit form.

Change a button image based on its value using CSS

Yes, possible with css. Use the following:

.btn-default[value="Facebook"]{
    background:url("Facebook-Login.png");
    color: transparent; 
    width: 100px;
    height: 100px;
    line-height: 0; 
    font-size: 0; 
}

.btn-default[value="Twitter"]{
    background:url("Twitter-Login.png");
    color: transparent; 
    width:100px;
    height:100px;
    line-height: 0; 
    font-size: 0; 
}

You will need a css selector with the button and value set properly. Since you have text in the button, you will probably want to hide the text, so set color:transparent to hide the text but not the image.

You will have to change the width and height to the correct pixel amount.

Sources:

how do i hide anchor text without hiding the anchor

http://www.w3schools.com/cssref/sel_attribute_value.asp

Good luck

CSS Change button image on click

Add .button class (for example) to the buttons then use this jQuery code:

$( ".button" ).click(function() {
  $('.button' ).removeClass('active');
  $( this ).addClass('active');
});

<input type="button" class="button" id="button1" value="Button 1">
<input type="button" class="button" id="button2" value="Button 2">

Then with CSS you set the colors.
You can have as many buttons as you want. See the fiddle below to check how it works.

How to add background image for input type= button ?

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

Adding an image to submit button using CSS

The gray box is caused by a default border being added to the submit buttons. Whereas the submit text is the default value for the button.

HTML:

<input type="submit" id="search" name="submit" alt="search" value="">

CSS:

input#search    {
background:url(../search-icon.png);
background-repeat: no-repeat;
width:40px;
height:40px;
border: 0;
}

How do I use an image as a submit button?

Use an image type input:

<input type="image" src="/Button1.jpg" border="0" alt="Submit" />

The full HTML:

<form id='formName' name='formName' onsubmit='redirect();return false;'>  <div class="style7">    <input type='text' id='userInput' name='userInput' value=''>    <input type="image" name="submit" src="https://jekyllcodex.org/uploads/grumpycat.jpg" border="0" alt="Submit" style="width: 50px;" />  </div></form>

How to Change an Input Button Image Using Css