Schaltfläche mit Bild und Text zentriert, wie im Beispiel

Question

Ich mag würde Tasten mit einem Bild und einer zentrierten Text darauf erstellen, hier ein anschauliches Beispiel: http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png

Danke für die Hilfe!

Answer 1

Verwenden Sie background: url(yourimage.png) center center no-repeat transparent; auf der Schaltfläche mit CSS, um ein Hintergrundbild festzulegen.

Es gibt bereits beantwortete Fragen auf Stackoverflow:

<input type="button"> Hintergrund: How to add background image for input type="button"? <button> Hintergrund: <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"/>   
 

Answer 2

U kann versuchen,

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> 

können Sie die Höhe und Breite ändern, wie pro Ihre Anforderung.