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

来源：动视网责编：小采时间：2020-11-27 15:26:54

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

Html+css怎样实现纯文字和带图标的按钮:这次给大家带来Html+css怎样实现纯文字和带图标的按钮，Html+css实现纯文字和带图标的按钮的注意事项有哪些，下面就是实战案例，一起来看一下。本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种

推荐度：

点击下载本文 文档为doc格式

导读Html+css怎样实现纯文字和带图标的按钮:这次给大家带来Html+css怎样实现纯文字和带图标的按钮，Html+css实现纯文字和带图标的按钮的注意事项有哪些，下面就是实战案例，一起来看一下。本文总结一下一些基础页面元素的实现方式，后续陆续更新。首先我们遇到最多的可能是按钮的切图，按钮可能有很多种

这次给大家带来Html+css怎样实现纯文字和带图标的按钮，Html+css实现纯文字和带图标的按钮的注意事项有哪些，下面就是实战案例，一起来看一下。

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

</pre><pre name="code" class="html"><!DOCTYPE html> 
<html lang="zh-CN"> 
<head> 
 <title>按钮写法</title> 
 <meta charset="UTF-8"> 
 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> 
 <link rel="stylesheet" href="css/style.css"> 
<style type="text/css"> 
 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>标签按钮--> 
<a href="" class="btn">a标签按钮</a> 
<!--<input>标签按钮--> 
<input class="inbtn btn" type="button" value="input标签按钮"/> 
<!--<button>标签按钮--> 
<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>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

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

推荐度：

点击下载本文 文档为doc格式

标签：按钮 html css

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐