分享CSS按钮的多种制作方式，附CSS 按钮样式代码

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了分享CSS按钮的多种制作方式，附CSS 按钮样式代码，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1964字，纯文字阅读大概需要3分钟。

内容图文

一、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按钮的多种制作方式，附CSS 按钮样式代码的详细内容。

内容总结

以上是互联网集市为您收集整理的分享CSS按钮的多种制作方式，附CSS 按钮样式代码全部内容，希望文章能够帮你解决分享CSS按钮的多种制作方式，附CSS 按钮样式代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端