Html+css实现纯文字和带图标的按钮
Html+css实现纯文字和带图标的按钮
发布时间:2017-01-07 来源:查字典编辑
摘要:本文总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图...

本文总结一下一些基础页面元素的实现方式,后续陆续更新。首先我们遇到最多的可能是按钮的切图,按钮可能有很多种外观,但是一般可分为纯文字的和带图标的按钮,下面就来说说这两种按钮的实现方法。效果图如下:

Html+css实现纯文字和带图标的按钮1

代码如下:

XML/HTML Code复制内容到剪贴板 </pre><prename="code"class="html"><!DOCTYPEhtml> <htmllang="zh-CN"> <head> <title>按钮写法</title> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=Edge,chrome=1"> <linkrel="stylesheet"href="css/style.css"> <styletype="text/css"> a:hover{text-decoration:none;} .btn{ display:inline-block; margin-top:10px; padding:10px24px; border-radius:4px; background-color:#63b7ff; color:#fff; cursor:pointer; } .btn:hover{ background-color:#99c6ff; } .inbtn{ border:none; } .bubtn{ border:none; } .btn{ font-style:normal; } .bgbtnspan{ margin-left:10px; padding-left:20px; background:url(images/edit.png)leftcenterno-repeat; } .bgbtn02img{ margin-bottom:-3px; margin-right:10px; } </style> </head> <body> <> <ahref=""class="btn">a标签按钮</a> <> <inputclass="inbtnbtn"type="button"value="input标签按钮"/> <> <buttonclass="bubtnbtn">button标签按钮</button> <> <iclass="ibtnbtn">i标签按钮</i> <> <ahref=""class="bgbtnbtn"> <span>带图标按钮</span> </a> <ahref=""class="bgbtn02btn"> <imgsrc="images/edit.png"/>带图标按钮 </a> </body> </html> 至于各种标签的优缺点,还是需要大家去体会啦,如果大家有什么好玩的按钮要写,我们一起实现哦。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新XHTML学习
热门XHTML学习
网页设计子分类