1, button production methods
-
With a picture (currently used very much)
-
Pure CSS a label
-
Photo 2 input determines the type of input when the input type attribute is the submit button such as these when he presented a button
-
2、CSS
-
Width and height of the line elements disposed inside is not effective for display: block; inline element set may be set as a block element
-
text-align the text may be laterally centered in the container
-
When the value of line-height and height as the vertical center when the text
-
text-decoration underline text removal
-
background property can be set to the background color element
-
color property can be set as the text color
-
font-family property can set the font
-
border: none remove the default border
3, did not beautify button Case
. 1 <! DOCTYPE HTML> 2 <HTML> . 3 <head> . 4 <title> </ title> . 5 <style type = "text / CSS"> . 6 A { . 7 width : 60px ; . 8 height : 40px ; . 9 border : 2px Solid Orange ; 10 the display : block ; / * inline elements provided the width and height is not effective for display: block; inline element can be set to block current element * / . 11 text-align = left : Center ; / * text container laterally centered* / 12 is Line-height : 40px ; / * when the value of the same height with the vertical center when the text * / 13 is text-Decoration : none ; / * will be underlined text is removed * / 14 15 } 16 . 17 </ style> 18 is </ head> . 19 <body> 20 is <a href="#"> a button </a> 21 is <INPUT type = "Submit" value = "button two"> 22 is <INPUT type = "button" name = "button three "> 23 is <button> button four </ button> 24 </ body> 25</html>
Operating results :
4, beautification button to make the case:
. 1 <! DOCTYPE HTML> 2 <HTML> . 3 <head> . 4 <title> </ title> . 5 <style type = "text / CSS"> . 6 A { . 7 width : 60px ; / * set the width of 60 pixels * / 8 height : 40px ; / * set 40 pixels high * / . 9 border : 2px Solid orange ; / * set the border side length orange pixel * / 10 the display : Block ; / * element disposed within the line width and height not effective for display: block ; inline element set may be set as a block element* / . 11 text-align = left : Center ; / * Text laterally centered in the container * / 12 is Line-height : 40px ; / * when the value of the height as when text vertical center * / 13 is text-Decoration : none ; / * the text underline removal * / 14 background : Skyblue ; / * set the background color of the element: blue * / 15 color : white ; / * set text color: white * / 16 border : none ; / *Border removed * / . 17 margin-bottom : 10px ; / * the outer frame 10 from the lower portion of the pixel * / 18 is . 19 } 20 is .bt { 21 is width : 60px ; / * set the width of 60 pixels * / 22 is height : 40px ; / * set high 40 pixels * / 23 is border : 2px orange Solid ; / * set the border pixel side length orange * / 24 the display : Block ; / *An element disposed within the line width and height not effective for display: block; inline element can be set to block current element * / 25 text-align = left : Center ; / * Text laterally centered in the container * / 26 is Line-height : 40px ; / * when the value of the height as when text vertical center * / 27 text-Decoration : none ; / * will be underlined text is removed * / 28 background : Skyblue ; / * set elements background color: blue * / 29 color : White ; / * set the text color: white * / 30 border: None ; / * remove border * / 31 is margin-bottom : 10px ; / * lower outer border from 10 pixels * / 32 33 is } 34 is 35 </ style> 36 </ head> 37 [ <body> 38 is <A the href = " # "> a button </a> 39 <INPUT type =" Submit "value =" button two "class =" BT "> 40 <INPUT type =" button "value =" three button "class =" BT "> 41 is <button class = "bt"> button for four </ button> 42 is </ body> 43 is </ HTML>
Operating results :
