html5任意形状按钮,CSS实现8种炫酷按钮

在各种UI组件库大行其道的今天，大家已经很少自己用CSS去实现一些效果了，久而久之CSS的水平也越来越退步，所以有空还是得练练。今天给大家分享8种炫酷按钮的CSS实现。

1. 3D按钮1

现在的主流是扁平化的设计，拟物化的设计比较少见了，所以我们仅从技术角度去分析如何实现这个3D按钮(文中只列出各种实现的关键代码，完整代码请参考CodePen)。

该按钮的立体效果主要由按钮多出的左、下两个侧面衬托出来，我们可以使用box-shadow模拟出这两个侧面：

HTML：

3D Button 1

CSS:

.button-3d-1{

position: relative;

background: orangered;

border: none;

color: white;

padding: 15px 24px;

font-size: 1.4rem;

outline: none;

box-shadow: -6px 6px 0 hsl(16, 100%, 30%);

}

效果：

加了box-shadow之后整体形状有点像了，但是立方体的左上和右下确缺了一块。通过观察我们发现，缺的这两块是三角形的，所以如果我们能构造两个三角形补到这两个角上就行了。用CSS画三角形对大家来说应该是基本操作了，如果还有同学不知道，下面的动画很好的解释了原理(代码参考 Triangle)：

我们使用::before和::after伪元素来分别绘制左上、右下的两个三角形，并通过绝对定位将它们固定到两个角落：

CSS：

.button-3d-1::before {

content: "";

display: block;

width: 0;

height: 0;

position: absolute;

top: 0;

left: -6px;

border: 6px solid transparent;

border-right: 6px solid hsl(16, 100%, 30%);

border-left-width: 0px;

}

.button-3d-1::after {

content: "";

display: block;

width: 0;

height: 0;

position: absolute;

bottom: -6px;

right: 0;

border: 6px solid transparent;

border-top: 6px solid hsl(16, 100%, 30%);

border-bottom-width: 0px;

}

接下来，我们需要实现点击时按钮被按下的效果，思路是点击时将按钮正面向左下角移动，同时减少box-shadow的偏移量以达到按钮底部固定不动的效果：

CSS：

.button-3d-1:active {

background: hsl(16, 100%, 40%);

top: 3px;

left: -3px;

box-shadow: -3px 3px 0 hsl(16, 100%, 30%);

}

最后，我们需要重新计算左上、右下两个三角形的尺寸和位置，以适应按下后上下缺口的变小：

CSS：

.button-3d-1:active::before {<