How to Remove the Gray Border from Buttons with Custom Images?

Removing the Border from Buttons

When customizing buttons by replacing the default images with custom ones, it's common to encounter a persistent gray border around the image. This border can be removed to achieve a clean and seamless button design.

Solution

To remove the gray border from a button, simply add the following CSS styles to the button's code:

<code class="css">padding: 0;
border: none;
background: none;</code>

Sample Code

<code class="html"><button style="padding: 0; border: none; background: none;">
  <img src="/path/to/image.png">
</button></code>

Demo

For a live demonstration, refer to the following URL:

https://jsfiddle.net/Vestride/dkr9b/

By applying these CSS styles, the button will display only the custom image without any surrounding border.

The above is the detailed content of How to Remove the Gray Border from Buttons with Custom Images?. For more information, please follow other related articles on the PHP Chinese website!