Html+css Implementation of Pure Text and Button with Icon

Time:2019-9-5

This article summarizes the implementation of some basic page elements, followed by updates. First of all, we may encounter most of the button cut map, buttons may have many kinds of appearance, but generally can be divided into pure text and icon buttons, the following two button implementation methods. The results are as follows:

The code is as follows:

XML/HTML CodeCopy content to clipboard
  1. </pre><pre name=“code” class=html><!DOCTYPE html>     
  2. <html lang=“zh-CN”>     
  3. <head>     
  4.   <title>Button Writing</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. <! – < a > Label Button – >     
  44. <a href=“” class=“btn”>A label button</a>     
  45. <! – < input > label button – >     
  46. <input class=“inbtn btn” type=“button” value=“Input Label Button”/>     
  47. <! – < button > label button – >     
  48. <button class=“bubtn btn”>Button label button</button>     
  49. <! – Arbitrary Label Button – >     
  50. <i class=“ibtn btn”>I Label Button</i>     
  51. <! – Button with Background Button – >     
  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 labels, we still need to understand, if you have any interesting buttons to write, we will achieve together oh.

Recommended Today

Resolving Time Zone Errors with Docker

1. The correct time zone in China is set to CST, i.e.China Standard TimeIn usedockerstart-upJenkinsWhen mirroring, the settings for mirroring are usuallyCoordinated Universal Time。 So add parameters at startup -v /etc/localtime:/etc/localtimeMount the local time zone to the mirror, so that the mirror gets the correct time zone. Then go to Jenkins and fill in the […]