How to Change an Input Button Image using CSS? Last Updated : 15 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report 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 ContentUsing background-image PropertyChanging the Button Image on HoverUsing background-image PropertyThe 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 PropertyChanging the Button Image on HoverThe 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> Output:Changing the Button Image on Hover Example output Comment More infoAdvertise with us Next Article How to add a button to an image using CSS ? S sayantanm19 Follow Improve Article Tags : Web Technologies CSS CSS-Misc Similar Reads How to add a button to an image using CSS ? In the article, we will explore how to add a button to an image using CSS. Adding a button to an image is often used to create an overlay effect to a button on an image that provides an interactive and engaging layout on a webpage. We can achieve this effect with the combination of various CSS Prope 4 min read How to create a shinny button using HTML and CSS ? Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c 3 min read How to create Text Buttons using CSS ? In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H 2 min read How to change color of PNG image using CSS? Given an image and the task is to change the image color using CSS. Use filter function to change the png image color. Filter property is mainly used to set the visual effect to the image. There are many property value exist to the filter function. filter: none|blur()|brightness()|contrast()|drop-sh 1 min read How to change the background image using jQuery ? To change the background image using jQuery, you can use the jQuery CSS() method. For this, the whole property value is specified using the url() functional notation. Approach: Suppose we have an image URL stored in a variable and then use css() method to change the value of background image. Below 2 min read How to Create Custom Radio Button using HTML and CSS ? The simple radio button can be customized using HTML and CSS easily. We will use some CSS properties to create a custom radio button. The :after pseudo-element and checked attribute is used to set some CSS property. The complete code is divided into two sections, the first section contains the HTML 3 min read Like