CSS中有很多技巧來讓圖片變成一個按鈕。這篇文章將介紹兩種方法。
第一種方法是使用CSS的background屬性。可以為圖片設置一個hover效果,當鼠標懸停在圖片上時,圖片的背景顏色和文本都會變化。
img.btn { padding: 10px 20px; background-color: #007bff; color: #fff; border-radius: 5px; text-align: center; transition: all 0.3s ease; } img.btn:hover { background-color: #0056b3; color: #fff; }
第二種方法是使用CSS的border屬性。這樣的按鈕看起來更像一個傳統的按鈕,可以為圖片設置懸停時的邊框顏色。
img.btn { padding: 10px 20px; border: 2px solid #007bff; border-radius: 5px; text-align: center; transition: all 0.3s ease; } img.btn:hover { border-color: #0056b3; }
以上這兩種方法都可以使用,取決于你想要的按鈕樣式和效果。同時也說明了CSS的可塑性和靈活性。