1、按钮的制作方式
用图片（目前用的不多）
纯CSS a标签
input 图片二决定了input的类型 当input的type属性是submit button等这些的时候他呈现一个按钮
button标签
2、CSS
行内元素设置宽高不生效，适用display:block；可以将行内元素设置为块集元素
text-align可以是文字在容器中横向居中
line-height当数值与height一样的时候文字垂直居中
text-decoration将文字下划线去除
background属性可以为元素设置背景颜色
color属性可以为文字设置颜色
font-family属性可以设置字体
border:none 去除默认边框
3、未美化按钮案例
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{
width:60px;
height: 40px;
border: 2px solid orange;
display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */
text-align: center ;/*文字在容器中横向居中*/
line-height: 40px;/*当数值与height一样的时候文字垂直居中*/
text-decoration: none;/*将文字下划线去除*/
}
</style>
</head>
<body>
<a href="#" >按钮一</a>
<input type="submit" value="按钮二">
<input type="button" name="按钮三">
<button>按钮四</button>
</body>
</html>
运行结果：
4、美化制作按钮案例：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a{
width:60px;/*设置宽60像素*/
height: 40px;/*设置高40像素*/
border: 2px solid orange;/*设置边框为边长橙色2像素*/
display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */
text-align: center ;/*文字在容器中横向居中*/
line-height: 40px;/*当数值与height一样的时候文字垂直居中*/
text-decoration: none;/*将文字下划线去除*/
background: skyblue;/*设置元素背景颜色：天蓝色*/
color:white;/*设置文字颜色：白色*/
border:none ;/*去除边框*/
margin-bottom: 10px;/*下部外边框距离10像素*/ }
.bt{
width:60px;/*设置宽60像素*/
height: 40px;/*设置高40像素*/
border: 2px solid orange;/*设置边框为边长橙色2像素*/
display: block;/*行内元素设置宽高不生效，适用display:block;可以将行内元素设置为块集元素 */
text-align: center ;/*文字在容器中横向居中*/
line-height: 40px;/*当数值与height一样的时候文字垂直居中*/
text-decoration: none;/*将文字下划线去除*/
background: skyblue;/*设置元素背景颜色：天蓝色*/
color:white;/*设置文字颜色：白色*/
border:none ;/*去除边框*/
margin-bottom: 10px;/*下部外边框距离10像素*/ } </style>
</head>
<body>
<a href="#" >按钮一</a>
<input type="submit" value="按钮二" class="bt">
<input type="button" value="按钮三" class="bt">
<button class="bt" >按钮四</button>
</body>
</html>
运行结果：
