How to Change the 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.

In our snippet, we’ll show how to change buttons to images with <input> and <button> elements.

Start with creating HTML.

Create HTML

Use <span class="attribute">submit</span> as an <input> type.
Add the <span class="attribute">class</span> and <span class="attribute">value</span> attributes.

How to Change Input and Button Images with CSS

<input type="submit" class="example" value="" />

Add CSS

Set the background property and specify the needed URL.
Set the cursor property to "pointer".
Add the width, height, and border properties.

How to Change Input and Button Images with CSS

.example {
  background: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60') no-repeat;
  cursor: pointer;
  width: 300px;
  height: 200px;
  border: none;
}

Here is the result of our code.

Example of changing an input image of the button:

How to Change Input and Button Images with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        background: url('https://images.unsplash.com/photo-1518837695005-2083093ee35b?ixlib=rb1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60') no-repeat;
        cursor: pointer;
        width: 300px;
        height: 200px;
        border: none;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="submit" class="example" value="" />
    </form>
  </body>
</html>

Try it Yourself »

Result

<div class="demo px-2.5 mt-1 mb-5"> <form action-xhr="/form/submit" method="post"> <input class="example" type="submit" value="">``</input> </form> </div>In the example above, we used the <kbd class="highlighted">background</kbd> property to include a background image. You can also change the image type if required.

Next, see an example where we use the <button> element to change the image button.

Example of changing a button image:

How to Change Input and Button Images with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      button {
        background-image: url('https://images.unsplash.com/photo-1582747652673-603191169c49?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
        background-size: cover;
        width: 400px;
        height: 300px;
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <button type="submit">Button</button>
  </body>
</html>

Try it Yourself »

In our last example, the image appears when we hover on the button. This can be useful when making buttons that react to the mouse.

Example of changing a button image on hover:

How to Change Input and Button Images with CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      button {
        width: 400px;
        height: 300px;
        border: 0;
        cursor: pointer;
        font-size: 2em;
      }
      button:hover {
        background-image: url('https://images.unsplash.com/photo-1582747652673-603191169c49?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60');
        background-size: cover;
      }
    </style>
  </head>
  <body>
    <button type="submit">Button</button>
  </body>
</html>

Try it Yourself »