◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
CSS网页按钮设计：创建各种炫酷的按钮样式
ID:14235 / 打印
CSS网页按钮设计：创建各种炫酷的按钮样式，需要具体代码示例
在网页设计中，按钮是一个非常重要的元素，因为它不仅是用户和网站交互的纽带，还能够增加整体视觉效果和用户体验。而一个好的按钮样式不仅要有吸引人的外观，还需要考虑到一些功能细节，比如点击效果、悬停效果等等。本文将为大家分享一些CSS按钮设计的技巧和炫酷的样式，同时提供代码示例，希望能够帮助大家更好地设计按钮，为网站和应用增加更多的创意。
一、基本的CSS按钮
首先，我们来看一下最基本的CSS按钮样式：
立即学习“前端免费学习笔记（深入）”；
HTML代码：
<button class="btn">Click me</button>
CSS样式：
.btn { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .btn:hover { background-color: #3e8e41; }这个按钮有绿色背景，白色文本和圆角边框。当鼠标悬浮在按钮上时，背景色变为深绿色，实现了简单的悬停效果。这个按钮样式基本上可以套用到大多数场景中。
二、3D立体效果按钮
下面我们来创建一个3D立体效果的按钮：
HTML代码：
<button class="btn-3d">Click me</button>
CSS样式：
.btn-3d { border: none; color: #fff; font-size: 25px; line-height: 1; margin: 20px; padding: 10px 20px; position: relative; text-align: center; text-shadow: rgba(0,0,0,.4) 1px 1px; transform-style: preserve-3d; transition: all .3s ease-out; background: linear-gradient(to bottom, #556270 0%,#616161 100%); background-color: #556270; } .btn-3d:before, .btn-3d:after { border: none; content: ''; position: absolute; top: calc(50% - 2px); left: 0; height: 4px; width: 100%; transform-style: preserve-3d; transition: all .3s ease-out; } .btn-3d:before { background: #BD3F32; transform: translateZ(-1px); box-shadow: 0 0 8px rgba(189,63,50,.7); } .btn-3d:after { background: #3F7FBC; transform-origin: left; transform: rotateY(90deg) translateZ(-1px); box-shadow: 0 0 8px rgba(63,127,188,.7); } .btn-3d:hover { background: linear-gradient(to bottom, #BD3F32 0%,#616161 100%); transform: translateZ(-6px); text-shadow: none; box-shadow: 0 0 8px rgba(0,0,0,.5); } .btn-3d:hover:before { transform: translateZ(-13px) rotateY(60deg); } .btn-3d:hover:after { transform: rotateY(-60deg) translateZ(-13px); transition-delay: .05s; }这个按钮样式有明显的3D立体外观效果和hover状态时的平移/旋转效果，不仅给用户带来了视觉上的冲击，也增加了用户体验感。
三、背景变化按钮
下面这个按钮样式通过背景色的渐变变化，在视觉上为用户提供了更好的提示：
HTML代码：
<button class="btn-change">Click me</button>
CSS样式：
.btn-change { cursor: pointer; display: inline-block; margin: .5rem; padding: .75rem 1.5rem; position: relative; text-align: center; text-transform: uppercase; } .btn-change:before { border-right: 1px solid white; content: ""; height: 100%; left: 0; position: absolute; top: 0; transform: skew(-15deg) scaleY(1.4); width: 0; } .btn-change:hover:before { width: 100%; transition: all .3s ease; } .btn-change:after { border-left: 1px solid white; content: ""; height: 100%; position: absolute; right: 0; top: 0; transform: skew(15deg) scaleY(1.4); width: 0; } .btn-change:hover:after { width: 100%; transition: all .3s ease; transition-delay: .15s; }这个按钮样式的特点是hover状态下背景色变化得比较渐进，可以在视觉上更好地引导用户。
四、镂空效果按钮
接下来，我们将创建一个非常酷的镂空效果按钮样式：
HTML代码：
<button class="btn-void">Click me</button>
CSS样式：
.btn-void { border: solid 2px #bada55; background: none; color: #bada55; font-size: 18px; font-weight: bold; padding: 12px 24px; position: relative; transition: all .35s; overflow: hidden; } .btn-void:before, .btn-void:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #bada55; transition: all .35s; } .btn-void:before { height: 0%; width: 100%; } .btn-void:after { height: 100%; width: 0%; } .btn-void:hover, .btn-void:focus, .btn-void:active { border-color: #bada55; color: #fff; } .btn-void:hover:before, .btn-void:focus:before, .btn-void:active:before { height: 100%; } .btn-void:hover:after, .btn-void:focus:after, .btn-void:active:after { width: 100%; }这个按钮样式的特点是hover状态下，按钮周边出现了一个白边框，并且按钮内部的矩形形状的区域变为白色，按钮文本变为绿色。整体恢复时，有渐变的效果呈现。
五、加载中按钮
最后，我们来看一个带有加载状态的按钮样式：
HTML代码：
<button class="btn-loading">Submit</button>
CSS样式：
.btn-loading { background-color: #4CAF50; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; position: relative; } .btn-loading:after { content: ""; position: absolute; top:50%; left: 50%; border: 6px solid #e6e6e6; border-radius: 50%; width: 50px; height: 50px; margin-left: -25px; margin-top: -25px; border-top-color: #3498db; animation: spin 2s linear infinite; display: none; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .btn-loading.loading:after { display: block; }这个按钮样式的特点是，在点击提交按钮后，按钮内容会被隐藏，并出现一个旋转的动画，提示用户正在加载中，整体效果比较直观。
总结
通过以上五个按钮样式的介绍，我们可以清晰的看到，一个好的按钮不仅需要吸引人的视觉效果，还需要注意到一些功能细节，比如hover状态下的变化、点击后的交互等等。本文提供的按钮样式都是基于CSS编写的，可以在实际项目中很方便的应用。大家在编写网页时，可以多关注一些特殊效果的实现，打造更符合自己需求的按钮。
