CSS按钮有哪些制作方式

这篇文章将为大家详细讲解有关CSS按钮有哪些制作方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、CSS按钮的多种写法

CSS按钮可以用button直接写，写可以用a标签写，还可以用input写，当然也可以用div，你可以根据每个标签的特点，使用不同的样式把它们设置成你想要的样式。比如：用a标签写按钮，必然会用到text-decoration: none这个属性，你用button写为了美观，可能会用到这个属性 border: none等等。

1、button按钮（无样式）

<button>默认按钮</button>

2、超链接a标签按钮

<a href="#" class="button">链接按钮</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按钮（含样式）

<button class="button">按钮</button>

CSS部分：

.button { background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; font-size: 16px; cursor: pointer; }

4、input输入框按钮

<input type="button" class="button" value="输入框按钮">

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; }

图片展示 ：

关于CSS按钮有哪些制作方式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。