php 花样button格式,分享CSS按钮的多种制作方式，附CSS按钮样式代码

在项目中，几乎所有的网站都会用到按钮，多则十几个，少则几个。一个实用又好看的按钮，能给页面增色不少，从而更能吸引用户的眼球。本文主要讲述CSS按钮的多种写法和CSS按钮的美化，最后会展示一款常见的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: 15px 32px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

}

3、button按钮(含样式)按钮

CSS部分：.button {

background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

font-size: 16px;

cursor: pointer;

}

4、input输入框按钮

CSS部分:.button {

background-color: #4CAF50;

border: none;

color: white;

padding: 15px 32px;

text-align: center;

font-size: 16px;

cursor: pointer;

}

效果图：

二、常见CSS按钮样式代码

做一个很有质感的金属按钮，当用户点击此按钮时，会出现右图的效果，背景颜色变深，按钮周围的阴影呈内阴影。.div {

display: inline-block;

padding: .3em .5em;

background-image: linear-gradient(#ddd, #bbb);

border: 1px solid rgba(0, 0, 0, .2);

border-radius: .3em;

box-shadow: 0 1px white inset;

text-align: center;

text-shadow: 0 1px 1px black;

color: white;

font-weight: bold;

}

.div:active {

box-shadow: .05em .1em .2em rgba(0, 0, 0, .6) inset;

border-color: rgba(0, 0, 0, .3);

background: #bbb;

}

图片展示 ：

以上，介绍了有哪些方法可以制作按钮，以及为了美观，你可以设置什么样式，最后，还举例一个例子，供学习者参考！