分享CSS按钮的多种制作方式
导读：一、CSS按钮的多种写法 CSS按钮可以用button直接写，写可以用a标签写，还可以用input写，当然也可以用div，你可以根据每个标签的特点，使用不同的样式把它们设置成你想要的样式。比如：用a标签写按钮，必然会用到text-dec...
一、CSS按钮的多种写法
CSS按钮可以用button直接写，写可以用a标签写，还可以用input写，当然也可以用div，你可以根据每个标签的特点，使用不同的样式把它们设置成你想要的样式。比如：用a标签写按钮，必然会用到text-decoration:none这个属性，你用button写为了美观，可能会用到这个属性border:none等等。
1、button按钮（无样式）
默认按钮
2、超链接a标签按钮
链接按钮
CSS部分：
.button{
background-color:#4CAF50;
color:white;
padding:15px32px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
}
3、button按钮（含样式）
按钮
CSS部分：
.button{
background-color:#4CAF50;
border:none;
color:white;
padding:15px32px;
text-align:center;
font-size:16px;
cursor:pointer;
}
4、input输入框按钮
CSS部分:
.button{
background-color:#4CAF50;
border:none;
color:white;
padding:15px32px;
text-align:center;
font-size:16px;
cursor:pointer;
}
效果图：
button1.jpg
二、常见CSS按钮样式代码
做一个很有质感的金属按钮，当用户点击此按钮时，会出现右图的效果，背景颜色变深，按钮周围的阴影呈内阴影。
.div{
display:inline-block;
padding:.3em.5em;
background-image:linear-gradient(#ddd,#bbb);
border:1pxsolidrgba(0,0,0,.2);
border-radius:.3em;
box-shadow:01pxwhiteinset;
text-align:center;
text-shadow:01px1pxblack;
color:white;
font-weight:bold;
}
.div:active{
box-shadow:.05em.1em.2emrgba(0,0,0,.6)inset;
border-color:rgba(0,0,0,.3);
background:#bbb;
}
本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 分享CSS按钮的多种制作方式
本文地址： https://pptw.com/jishu/664627.html