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.
Example-1: Setting an image to the button.
Example-2: Applying the image when the button is hovered upon. This effect can be useful in making buttons that react to the mouse.
Before hovering on the button:
After hovering on the button:
- CSS | Animation to Change the Hover State of a Button/Image
- button tag vs input type="button" attribute
- How to Create an Effect to Change Button Color using HTML and CSS ?
- How to change Input characters to Upper Case while typing using CSS/jQuery ?
- How to change the font-color of disabled input using CSS ?
- How to change color of PNG image using CSS?
- Change an HTML5 input placeholder color with CSS
- How to change image on hover with CSS ?
- How to create a radio button similar to toggle button using Bootstrap ?
- Convert an image into grayscale image using HTML/CSS
- How to change the font of HTML5 Canvas using a button in Angular.js?
- How to Change the Text of a Button using jQuery?
- How to change the button color after clicking it using AngularJS ?
- How to set radio button checked by button click in AngularJS ?
- How to change (-, +) symbol with a button in Bootstrap Accordion ?
- Change button Color in Kivy
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.