首页 >web前端 >css教程 >CSS网页按钮设计:创建各种炫酷的按钮样式

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

WBOY
WBOY原创
2023-11-18 10:28:101683浏览

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网页按钮设计:创建各种炫酷的按钮样式的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn