本文摘自PHP中文网,作者不言,侵删。
本篇文章给大家分享如何用CSS创建一个带有图像图标的按钮,内容很详细,有感兴趣的朋友可以看一看。在按钮表面上显示图像图标时,请写代码以在按钮标签中显示图像,实现此效果要使用显示设置为内联块的span标记。
代码如下:
image-button.css
1 2 3 4 5 6 7 8 9 10 11 12 13 | #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
1 2 3 4 5 6 7 8 9 10 11 | <!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如何创建图像图标按钮(附代码)的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
css如何创建图像图标按钮(附代码)
更多相关阅读请进入《图标按钮》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » CSS如何创建图像图标按钮(附代码)