這篇文章跟大家分享如何用CSS創建一個有圖像圖示的按鈕,內容很詳細,有興趣的朋友可以看看。
在按鈕表面上顯示圖像圖示時,請寫入程式碼以在按鈕標籤中顯示圖像,實現此效果要使用顯示設定為內聯塊的span標記。
程式碼如下:
image-button.css
#buttonImage { background-image:url('/img/search.png'); display:inline-block; margin-top:2px; width:16px; height:16px; } .flatbutton{ border:1px solid #3079ed; background-color:#4d90fe; width:100px; height:28px; }
image-button.html
<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <link rel="stylesheet" type="text/css" href="image-button.css" /> </head> <body> <button class="flatbutton"><span id="buttonImage"></span></button> </body> </html>
效果如下:
以上是CSS如何建立圖片圖示按鈕(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!