CSS如何建立圖片圖示按鈕（附程式碼）
- 不言原創
- 2018-11-09 17:47:084149瀏覽
這篇文章跟大家分享如何用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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn