css实现纯文字和带图标的按钮的代码。

发布时间：2023-09-16 13:52:40 所属栏目：语言来源：

导读：本篇内容介绍了“HTML+CSS怎样写带文字和图标的按钮，代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大

本篇内容介绍了“HTML+CSS怎样写带文字和图标的按钮，代码是什么”的有关知识，在实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

网站按钮在网站开发中是必不可少的，其实我们在按钮开发的时候会分成文字的和带图标的按钮，下文是css实现纯文字和带图标的按钮的代码。

代码如下：

XML/HTML Code 复制内容到剪贴板
pre>pre name="code" class="html">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 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>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!