html a 按钮效果图,分享CSS按钮的多种制作方式

一、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;

}

本文转载自中文网