Html+css实现纯文字和带图标的按钮
2021-05-08 21:10:44 本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种外观，但是一般可分为纯文字的和带图标的按钮，下面就来说说这两种按钮的实现方法。效果图如下：
代码如下：
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><!--<a>标签按钮--><ahref=""class="btn">a标签按钮</a><!--<input>标签按钮--><inputclass="inbtnbtn"type="button"value="input标签按钮"/><!--<button>标签按钮--><buttonclass="bubtnbtn">button标签按钮</button><!--任意标签按钮--><iclass="ibtnbtn">i标签按钮</i><!--带背景图标按钮--><ahref=""class="bgbtnbtn"><span>带图标按钮</span></a><ahref=""class="bgbtn02btn"><imgsrc="images/edit.png"/>带图标按钮</a></body></html>至于各种标签的优缺点，还是需要大家去体会啦，如果大家有什么好玩的按钮要写，我们一起实现哦。
声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。 如涉及版权问题，请提交至online#300.cn邮箱联系删除。
网站建设 IT知识 IT知识教程 Html+css实现纯文字和带图标的按钮 
最新文章
热门文章
猜你喜欢
