How to implement plain text and buttons with icons in Html+css

This time I will show you how to implement pure text and buttons with icons using Html+css. What are the precautions for implementing pure text and buttons with icons using Html+css? The following is a practical case. Let’s take a look.

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.

nbsp;html>     
     
     
  <title>按钮写法</title>     
  <meta>     
  <meta>     
  <link>     
<style>     
  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>     
     
     
<!--<a>标签按钮-->     
<a>a标签按钮</a>     
<!--<input>标签按钮-->     
<input>     
<!--<button>标签按钮-->     
<button>button标签按钮</button>     
<!--任意标签按钮-->     
<i>i标签按钮</i>     
<!--带背景图标按钮-->     
<a>     
  <span>带图标按钮</span>     
</a>     
<a>     
  <img  src="/static/imghwm/default1.png" data-src="images/edit.png" class="lazy" alt="How to implement plain text and buttons with icons in Html+css" >带图标按钮     
</a>     
     

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to use HTML and CSS to make Dabai

##What are the commonly used tags in XHTML

How to use horizontal line annotations and code comments in HTML

The above is the detailed content of How to implement plain text and buttons with icons in Html+css. For more information, please follow other related articles on the PHP Chinese website!