button with image and centered text as in the example

Question

I'd like to create buttons with an image and a centered text on it, here a graphic example: http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png

Thanks for the help!

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

0

Use background: url(yourimage.png) center center no-repeat transparent; on the button with CSS to set a background image.

There are already answered questions on Stackoverflow:

<input type="button"> Background: How to add background image for input type="button"? <button> Background: <button> background image

.button{
        background: url(http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png) center center no-repeat transparent;
        cursor:pointer;
        border: none;
        padding: 100px;
        }

        <input type="button" name="button" value="Button" class="button"/>

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 05 '17 at 07:55

Syno

1,056
10
25

Hi, thanks for the reply, but it seems odd the hover effect and the size of the button, though http://www.essenzialmenta.it/test-btn/ – mario Apr 05 '17 at 08:41
edit: decreased padding, but still hover problem thank you very much! – mario Apr 05 '17 at 08:48
hi, it's just the hover effect that does not work, it hides the img – mario Apr 05 '17 at 08:55
can you replace that with a Zoom In hover effect? If yes, can you edit the css to do that? – mario Apr 05 '17 at 09:00
Do you want it to Zoom in or make it bigger? – Syno Apr 05 '17 at 09:09
Edit: Here is it with zooming in smoothly http://jsfiddle.net/w08ps6r6/2/ – Syno Apr 05 '17 at 09:20

score 0 · Answer 2 · answered Apr 05 '17 at 07:55

U may try,

css

.button-image{
  height: 50px;
  width: 75px;
  background: url(your-image.jpg) center center no-repeat transparent;
  border: none;
  display: block;
}

html

<button class="button-image">Button Text</button>

you can change the height and width as per your requirement.

button with image and centered text as in the example

2 Answers2