How to change an input button image using CSS?

html button with image and text
image button | html
button background image css
button over image bootstrap
css background image
image button html5
input type=image'' onclick
bootstrap image button

So, I can create an input button with an image using

<INPUT type="image" src="/images/Btn.PNG" value="">

But, I can't get the same behavior using CSS. For instance, I've tried

<INPUT type="image" class="myButton" value="">

where "myButton" is defined in the CSS file as

.myButton {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

If that's all I wanted to do, I could use the original style, but I want to change the button's appearance on hover (using a myButton:hover class). I know the links are good, because I've been able to load them for a background image for other parts of the page (just as a check). I found examples on the web of how to do it using JavaScript, but I'm looking for a CSS solution.

I'm using Firefox 3.0.3 if that makes a difference.


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.

How to change an input button image using CSS?, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  The default button in HTML can be changed to an image using CSS. The required button is selected using the respective CSS selector. The background property can then be set to include a background image and change the image type as required. The border of the button can also be removed to show only the image itself.


You can use the <button> tag. For a submit, simply add type="submit". Then use a background image when you want the button to appear as a graphic.

Like so:

<button type="submit" style="border: 0; background: transparent">
    <img src="/images/Btn.PNG" width="90" height="50" alt="submit" />
</button>

More info: http://htmldog.com/reference/htmltags/button/

How To Add a Button to an Image, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  How to Change Input and Button Images with CSS Buttons make your website attractive, but sometimes it can be difficult to style them, especially when we need to change buttons to images. Fortunately, there some ways of doing this.


HTML

<div class="myButton"><INPUT type="submit" name="" value=""></div>

CSS

div.myButton input {
    background:url(/images/Btn.PNG) no-repeat;
    cursor:pointer;
    width: 200px;
    height: 100px;
    border: none;
}

This will work anywhere, even in Safari.

HTML input type="image", The src attribute specifies the URL of the image to use as a submit button. Note: The src attribute is required for <input type="image">, and can only be used with <  Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button Forms


This article about CSS image replacement for submit buttons could help.

"Using this method you'll get a clickable image when style sheets are active, and a standard button when style sheets are off. The trick is to apply the image replace methods to a button tag and use it as the submit button, instead of using input. And since button borders are erased, it's also recommendable change the button cursor to the hand shaped one used for links, since this provides a visual tip to the users."

The CSS code:

#replacement-1 {
  width: 100px;
  height: 55px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  text-indent: -1000em;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}

#replacement-2 {
  width: 100px;
  height: 55px;
  padding: 55px 0 0;
  margin: 0;
  border: 0;
  background: transparent url(image.gif) no-repeat center top;
  overflow: hidden;
  cursor: pointer; /* hand-shaped cursor */
  cursor: hand; /* for IE 5.x */
}
form>#replacement-2 { /* For non-IE browsers*/
  height: 0px;
}

HTML input src Attribute, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  Using the image’s src as its css background could be useful in production (otherwise the two image download makes this a hack for when you need it). It would be really useful if there was a css way to use an image attribute as a css value, but right now you need to enter it manually in the css or use javascript.


Here's a simpler solution but with no extra surrounding div:

<input type="submit" value="Submit">

The CSS uses a basic image replacement technique. For bonus points, it shows using an image sprite:

<style>
    input[type="submit"] {
        border: 0;
        background: url('sprite.png') no-repeat -40px left;
        text-indent: -9999em;
        line-height:3000;
        width: 50px;
        height: 20px;
    }
</style>

Source: http://work.arounds.org/issue/21/using-css-sprites-with-input-type-submit-buttons/

How To Create Icon Buttons, input elements of type image are used to create graphical submit buttons, i.e. This will replace the current document with the received data. height, in CSS pixels, at which to draw the image specified by the src attribute. How to style input and submit button with CSS? You can now add the gradient background image to it or style it using CSS3 gradients. Change an HTML5 input's


<input type="image">, The first way to do such thing is to use the <button> tag: <button> <img src="http://​www.w3.org/html/logo/downloads/HTML5_Logo_32.png" /> </button> Yet there's another way, which uses background-images in CSS. I personally believe Use a more modern approach to image replacement: <button  Use the :hover selector to change the style of a button when you move the mouse over it. Tip: Use the transition-duration property to determine the speed of the "hover" effect: Example


the web thought: CSS and HTML5: background image in buttons, Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, and XML. First, use CSS to create a modal window (dialog box), and hide it by default. Then, use a JavaScript to show the modal window and to display the image inside the modal, when a user clicks on the image: Example. var modal = document.getElementById('myModal');


A quick guide to styling buttons using CSS, I have gathered some of the ways of styling buttons using CSS. You can #​eb94d0, #2079b0); background-image: linear-gradient(to bottom, #eb94d0, #​2079b0); You can also use HTML entities, but they're limited. Yet there's another way, which uses background-images in CSS. I personally believe that it is a better way of handling the button. In the above examples, the first is an image (as you can see you can't click on it), while the second is live (it's an actual button you can click but that does nothing).