Do you want to add an image on a button in WordPress? Adding an image to a button enhances the visual design of a page and gives visitors a clearer signal of what the button does.
With the Advanced Button block from Nexter Blocks, you can add an image to a button in the WordPress block editor (Gutenberg).
To check the complete feature overview documentation of the Nexter Blocks Advanced Button block, click here.
Best Used For:
- E-commerce sites adding product thumbnails or brand icons to call-to-action buttons
- Landing pages using icon-style images on buttons to reinforce the offer or destination
- Portfolio and agency sites pairing a custom graphic with a button label to improve click visibility
Requirement – This block is a part of Nexter Blocks. Make sure it is installed and activated.
To do this, add the Advanced Button block on the page and follow the steps.
1. Select the appropriate button style and add the text to the button.
2. Then go to the Icon tab. From the Icon Type dropdown, select Image. Use this option when you want to display a custom image file on the button rather than an icon font or SVG.
3. From the Image section, add the image you want to display on the button. Use this when the image is already uploaded to your media library or when you want to upload a new one specifically for this button.
From the Image Size dropdown, select the display size for the image. Use a smaller image size for compact buttons and a larger size when the image is a central visual element of the button design.
You can manage the image style further from the Style tab.
If you need a standard button without an image, the Button block in Nexter Blocks provides a straightforward alternative with full style controls and no image setup required.
Now you will see an image on the button. To further refine the button appearance on interaction, you can apply hover state styles using the block hover state options in Nexter Blocks.
