Html+css to achieve pure text and buttons with icons

This article summarizes the implementation methods of some basic page elements, which will be updated later. First of all, the most common thing we may encounter is the button cut-out. Buttons may have many appearances, but they can generally be divided into pure text buttons and buttons with icons. Let's talk about the implementation methods of these two types of buttons. The effect diagram is as follows:

The code is as follows:

XML/HTML CodeCopy content to clipboard

</ pre > < pre name = "code" class = "html" > <!DOCTYPE html >
< html lang = "zh-CN" >
< head >
< title > Button Writing </ 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 >
< href = "" class = "btn" > aLabel button </ a >
< input class = "inbtn btn" type = "button" value = "input label button" />
< button class = "bubtn btn" > button tag button </ button >
< i class = "ibtn btn" > i label button </ i >
< href = "" class = "bgbtn btn" >
< span > Button with icon </ span >
</ a >
< href = "" class = "bgbtn02 btn" >
< img src = "images/edit.png" /> Button with icon
</ a >
</ body >
</ html >

As for the advantages and disadvantages of various labels, you still need to experience them. If you have any interesting buttons to write, let's realize them together.

<<: Linux type version memory disk query command introduction

>>: The actual process of implementing the guessing number game in WeChat applet