CSS网页按钮设计：创建各种炫酷的按钮样式

百变鹏仔 4周前 (09-19) #CSS

文章标签按钮

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编写的，可以在实际项目中很方便的应用。大家在编写网页时，可以多关注一些特殊效果的实现，打造更符合自己需求的按钮。

文章推荐

CSS网页按钮设计：创建各种炫酷的按钮样式

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写