將Bootstrap整個圖像作爲按鈕

我正試圖在Bootstrap中創建一個看起來很甜的按鈕。我有4個圖像顯示我的按鈕（正常，懸停，按下，禁用）的離散狀態。將Bootstrap整個圖像作爲按鈕

但我無法弄清楚這是最佳做法。在一個輸入類型的圖像中使用src似乎並沒有那麼好，因爲瀏覽器在點擊時會創建一個藍色矩形。

（我只需要整個圖像是按鈕，它不是一個標誌或不便需要被顯示在某一位置）

編輯：它爲我定製的Facebook /谷歌/前景登錄按鈕

2017-06-28 Moritz Schöfl

您需要將網址替換爲您的圖片。

.fb { 
 
    background: url(http://placehold.it/50x20/00ff00); 
 
} 
 

 
.fb:hover { 
 
    background: url(http://placehold.it/50x20/0000ff); 
 
} 
 

 
.outlook:disabled { 
 
    background: url(http://placehold.it/50x20/000000); 
 
    color: white; 
 
} 
 

 
.fb:active { 
 
    background: url(http://placehold.it/50x20/666666); 
 
}

<button type="button" class="fb">button</button> 
 
<button type="button" class="outlook" disabled>button</button>

來源

2017-06-28 08:43:27 Gerard

謝謝這個實際工作，但寬度設置爲圖像的準確寬度只有當，有沒有辦法解決這個？ –

您可以設置背景大小的值。嘗試100％，覆蓋幷包含，以查看哪一個最符合您的需求。 – Gerard

最佳做法是使用：您將在「按鈕」上顯示圖像的元素之前。

來源

2017-06-28 08:21:36 DanielWaw

您可以使用錨標記內的img標記來做到這一點爲了在狀態之間進行切換，您可以使用jQuery。

讓我知道你是否需要任何進一步的幫助！

來源

2017-06-28 08:22:22

將Bootstrap整個圖像作爲按鈕

回答

相關問題