电话
13363039260
分享CSS按钮的多种制作方式
2024-01-17 14:34 小编
一、CSS按钮的多种写法
CSS按钮可以用button直接写，写可以用a标签写，还可以用input写，当然也可以用div，你可以根据每个标签的特点，使用不同的样式把它们设置成你想要的样式。比如：用a标签写按钮，必然会用到text-decoration:none这个属性，你用button写为了美观，可能会用到这个属性border:none等等。
1、button按钮（无样式）
<button>默认按钮</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按钮（含样式）
<buttonclass="button">按钮</button>
CSS部分：
.button{
background-color:#4CAF50;
border:none;
color:white;
padding:15px32px;
text-align:center;
font-size:16px;
cursor:pointer;
}
4、input输入框按钮
<inputtype="button"class="button"value="输入框按钮">
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;
}
猜你喜欢
联络方式：
13363039260
微信二维码 