CSS中怎么創(chuàng)建圖像圖標(biāo)按鈕

發(fā)布時間：2022-02-24 13:52:44 來源：億速云閱讀：130 作者：小新欄目：web開發(fā)

這篇文章主要介紹CSS中怎么創(chuàng)建圖像圖標(biāo)按鈕，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　在按鈕表面上顯示圖像圖標(biāo)時，請寫代碼以在按鈕標(biāo)簽中顯示圖像，實現(xiàn)此效果要使用顯示設(shè)置為內(nèi)聯(lián)塊的span標(biāo)記。

　　代碼如下：

　　image-button.css

　　#buttonImage{

　　background-image:url('/img/search.png');

　　display:inline-block;

　　margin-top:2px;

　　width:16px;

　　height:16px;

　　}

　　.flatbutton{

　　border:1pxsolid#3079ed;

　　background-color:#4d90fe;

　　width:100px;

　　height:28px;

　　}

　　image-button.html

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

　　<linkrel="stylesheet"type="text/css"href="image-button.css"/>

　　</head>

　　<body>

　　<buttonclass="flatbutton"><spanid="buttonImage"></span></button>

　　</body>

　　</html>

CSS中怎么創(chuàng)建圖像圖標(biāo)按鈕

以上是“CSS中怎么創(chuàng)建圖像圖標(biāo)按鈕”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

猜你喜歡