Html css implements plain text and buttons with icons_HTML/Xhtml

Html css implements plain text and buttons with icons_HTML/Xhtml_Web page production

WBOY

Release： 2016-05-16 16:36:03

Original

2671 people have browsed it

This article summarizes the implementation methods of some basic page elements and will be updated in the future. First of all, the most common thing we encounter is the cutout of buttons. Buttons may have many appearances, but they can generally be divided into plain text buttons and buttons with icons. Let’s talk about the implementation methods of these two buttons. The rendering is as follows:

The code is as follows:

XML/HTML CodeCopy content to clipboard

pre><pre name="code" class="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 label buttona>
<input class="inbtn btn " type="button" value= "input label button"/>
<button class="bubtn btn ">button label buttonbutton>
<i class="ibtn btn ">i tag buttoni>
<a href="" class="bgbtn btn">
<span>Button with icon span>
a>
<a href="" class="bgbtn02 btn">
<img src="images/ edit.png"/>Button with icon
a>
body>
html>

As for the advantages and disadvantages of various tags, everyone still needs to understand them. If you have any interesting buttons to write, we will implement them together.