search

Home >Web Front-end >HTML Tutorial >Html css implements plain text and buttons with icons_HTML/Xhtml_Web page production

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

WBOY
WBOYOriginal
2016-05-16 16:36:032682browse

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
  1. pre><pre name="code" class="html">>     
  2. <html lang="zh-CN">     
  3. <head>     
  4.   <title>按钮写法title>     
  5.   <meta charset="UTF-8">     
  6.   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">     
  7.   <link rel="stylesheet" href="css/style.css">     
  8. <style type="text/css">     
  9.   a:hover{text-decoration: none;}     
  10.   .btn{     
  11.     display: inline-block;     
  12.     margin-top: 10px;     
  13.     padding: 10px 24px;     
  14.     border-radius: 4px;     
  15.     background-color: #63b7ff;     
  16.     color: #fff;     
  17.     cursor: pointer;     
  18.   }     
  19.   .btn:hover{     
  20.     background-color: #99c6ff;     
  21.   }     
  22.   .inbtn{     
  23.     border: none;     
  24.   }     
  25.   .bubtn{     
  26.     border: none;     
  27.   }     
  28.   .btn{     
  29.     font-style: normal;     
  30.   }     
  31.   .bgbtn span{     
  32.     margin-left: 10px;     
  33.     padding-left: 20px;     
  34.     background: url(images/edit.png) left center no-repeat;     
  35.   }     
  36.   .bgbtn02 img{     
  37.     margin-bottom: -3px;     
  38.     margin-right: 10px;     
  39.   }     
  40. style> 
  41. head> 
  42. <body> 
  43.  
  44. <a href="" class="btn">a label buttona> 
  45.  
  46. <input class="inbtn btn " type="button" value= "input label button"/> 
  47.  
  48. <button class="bubtn btn ">button label buttonbutton> 
  49.  
  50. <i class="ibtn btn ">i tag buttoni> 
  51.  
  52. <a href="" class="bgbtn btn">
  53. <span>Button with icon span> 
  54. a> 
  55. <a href="" class="bgbtn02 btn">
  56. <img src="images/ edit.png"/>Button with icon
  57. a> 
  58. body> 
  59. 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.
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：How to set up horizontal navigation structure in Html_HTML/Xhtml_Web page productionNext article：How to set up horizontal navigation structure in Html_HTML/Xhtml_Web page production

Related articles

See more