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

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

代码如下：

</pre><pre name="code" class="html"><!DOCTYPE html> <html lang="zh-CN">

a:hover{text-decoration: none;} .btn{

display: inline-block; margin-top: 10px;

padding: 10px 24px; 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; }

.bgbtn span{ margin-left: 10px;

padding-left: 20px; background: url(images/edit.png) left center no-repeat;

} .bgbtn02 img{

margin-bottom: -3px; margin-right: 10px;

} </style>

</head> <body>

<a href="" class="btn">a标签按钮</a>

<input class="inbtn btn" type="button" value="input标签按钮"/>

<button class="bubtn btn">button标签按钮</button>

<i class="ibtn btn">i标签按钮</i>

<a href="" class="bgbtn btn">

<span>带图标按钮</span> </a>

<a href="" class="bgbtn02 btn"> <img src="images/edit.png"/>带图标按钮

</a> </body>

</html>

发表评论

共有条评论

用户名:	密码:
验证码:	匿名发表

学习交流

电脑开不了机的原因和解决办法

热门图片

猜你喜欢的新闻

猜你喜欢的关注