How to Change an Input Button Image using CSS?

Last Updated : 15 Oct, 2024

Changing an input button image using CSS allows developers to replace the default button style with a custom image. This enhances the button’s appearance and improves user interaction. CSS properties like background-image and hover effects enable dynamic and visually appealing button designs for web forms.

Here we have some common approaches:

Table of Content

Using background-image Property
Changing the Button Image on Hover

Using background-image Property

The background-image property allows you to set an image as the background of a button. You can control the image’s size with background-size: cover, adjust button dimensions using width and height, and remove the border for a clean appearance.

Example : In this example, we replace the default button style with a background image and remove the border to display only the image.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Change Button Image Using CSS</title>
    <style>
        input[type="button"] {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png');
            background-size: cover;
            background-position: center;
            width: 100px; /* Reduced width */
            height: 30px;  /* Reduced height */
            color: white;
            font-size: 1rem; /* Smaller font size */
            text-align: center;
            cursor: pointer;
            border-radius: 8px;
        }
    </style>
</head>

<body>

    <h3>Button Image Using background-image Property</h3>
    
    <input type="button" value="Click Me">

</body>

</html>

Output:

Changing button background using background-image Property

Changing the Button Image on Hover

The Changing the Button Image on Hover approach uses the CSS :hover pseudo-class to dynamically change the button’s background image when the user hovers over it. This creates an interactive, visually responsive button effect.

Example : In this example, we add a hover effect that changes the button’s background image when the user hovers over it. This is useful for creating interactive buttons that visually react to mouse actions.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Change Button Image on Hover Using CSS</title>
    <style>
        button {
            width: 200px;
            height: 60px;
            border: 2px solid #3498db;
            background-color: #3498db;
            color: white;
            font-size: 1.2rem;
            font-weight: bold;
            text-align: center;
            border-radius: 8px;
            cursor: pointer;
            transition: background 0.3s ease, box-shadow 0.3s ease;
        }

        /* Change image and add shadow on hover */
        button:hover {
            background-image: url(
'https://media.geeksforgeeks.org/wp-content/uploads/20190314004249/sample-image2.png');
            background-size: cover;
            background-position: center;
            color: white;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        /* Focus effect for keyboard navigation */
        button:focus {
            outline: none;
            border: 2px solid #2980b9;
        }
    </style>
</head>

<body>
    <h2>
        Changing Button Image Using CSS :hover
    </h2>

    <button type="submit">
        Hover Me
    </button>

</body>

</html>