用圖像和文本居中作爲例子按鈕

Question

我想用的圖像並在其上居中的文字，在這裏一個生動的例子創建按鈕： http://www.essenzialmenta.it/wp-content/uploads/2014/03/ytbtn-1.png

感謝您的幫助！

Answer 1

使用 background: url(yourimage.png) center center no-repeat transparent; 在按鈕上用CSS設置背景圖片。

現在已經有回答問題＃2：

<input type="button">背景：How to add background image for input type="button"? <button>背景：<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

ü可以嘗試，

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> 

你可以改變高度和寬度按您的要求。