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.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

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

Add 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:

<!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>

Result

In the example above, we used the background 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:

<!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>

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:

<!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>