欢迎光临
我们一直在努力

CSS中怎么创建图像图标按钮

这篇文章主要介绍CSS中怎么创建图像图标按钮,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

  在按钮表面上显示图像图标时,请写代码以在按钮标签中显示图像,实现此效果要使用显示设置为内联块的span标记。

  代码如下:

  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"/>

  <title></title>

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

  </head>

  <body>

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

  </body>

  </html>

以上是“CSS中怎么创建图像图标按钮”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注云搜网行业资讯频道!

赞(0)
【声明】:本博客不参与任何交易,也非中介,仅记录个人感兴趣的主机测评结果和优惠活动,内容均不作直接、间接、法定、约定的保证。访问本博客请务必遵守有关互联网的相关法律、规定与规则。一旦您访问本博客,即表示您已经知晓并接受了此声明通告。