--- theme: smartblue --- 「这是我参与11月更文挑战的第7天，活动详情查看：[2021最后一次更文挑战](https://juejin.cn/post/7023643374569816095/ "https://juejin.cn/post/7023643374569816095/")」 ## 前言大家好，今天来分享几个按钮的CSS样式。为什么突然想写这个呢，这就要说到最近掘金出了个小游戏——海底掘金，打开游戏页面，底部有两个大大的按钮，鼠标按下去会有较立体且真实的交互感，看到这个我就在想这个是怎么实现的，于是就有了今天这篇文章。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/262920315af649c6be7a20727a3d6b8b~tplv-k3u1fbpfcp-watermark.image?) 今天要分享的按钮全家福 👇 ![taun9-814fj.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/76304cd972eb41eb8ec296875f47038f~tplv-k3u1fbpfcp-watermark.image) ## 实现💻 ### 基础样式 ```html

开始

``` ```css /* 按钮btn 基础样式 */ body { height: 100vh; display: flex; justify-content: center; align-items: center; background-color: #bdc3c7; } .btn-list { display: grid; grid-template-columns: repeat(3,200px); gap: 50px; background: #fff; border-radius: 20px; padding: 50px; box-shadow: 0 0 5px 5px rgb(0 0 0 / 8%); } .btn { width: 200px; height: 80px; display: flex; justify-content: center; align-items: center; font-size: 2rem; cursor: pointer; user-select: none; letter-spacing: 1rem; text-indent: 1rem; border-radius: 20px; box-sizing: border-box; } ``` ### 闪烁效果 ![1.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4a71d86970b14fb9968c7a9a7b87935a~tplv-k3u1fbpfcp-watermark.image?) 思路就是`hover`后修改背景颜色、字体颜色，添加闪烁的效果。闪烁使用`:before`伪元素，利用`skew`倾斜，再`translate3d`移动即可。 ```css .twinkle { overflow: hidden; position: relative; border: 2px solid #2c3e50; color: #2c3e50; transition: background-color .2s; } .twinkle::before { content: ""; position: absolute; width: 50px; height: 200%; background-color: rgba(255, 255, 255, .6); transform: skew(45deg) translate3d(-200px,0,0); } .twinkle:hover { background-color: #2c3e50; } .twinkle:hover::before { transition: ease-in-out .5s; transform: skew(45deg) translate3d(300px,0,0); } ``` ### 滑动填充 ![2.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71828cfc32d94aad8bdb4fe5d69d7145~tplv-k3u1fbpfcp-watermark.image?) 类似进度条的效果，同样也是用`:before`伪元素实现，修改伪元素的宽度即可。注意修改`z-index`，不然会被覆盖掉。 ```css .slide { border: 2px solid #2980b9; color: #2980b9; position: relative; overflow: hidden; z-index: 1; transition: .5s; } .slide::before { content: ""; position: absolute; z-index: -1; width: 0; height: 100%; left: 0; background-color: #2980b9; transition: ease-in-out .5s; } .slide:hover::before { width: 100%; } ``` ### 边缘移动小球 ![3.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/05b8e92846824f108eb7dbe5ad9414e1~tplv-k3u1fbpfcp-watermark.image?) 乍一看挺有趣的：小球是如何绕着边框移动的呢？先让我们看看下面这张图。 ![7.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c17562c38a7472493f7497c05a59fcc~tplv-k3u1fbpfcp-watermark.image?) 原来，并不只有小球在运动，他有一个`容器`，这个`容器`起初进行水平运动，在到达外框的时候，旋转180度，这样在容器顶部的`小球`自然而然随着旋转，看起来就像是绕着边框运动一样。但是我在实现的过程中，发现还是挺难调整的，不难发现，我的小球在旋转的过程中，其实并没有完全沿着按钮的边框运动，这跟容器的形状有关系，我尝试过正圆的容器，尝试过矩形的，目前还没研究出来这是个怎样的**计算公式**，大家感兴趣的可以研究一下。 ```css .ball { border: 2px solid #8e44ad; color: #8e44ad; position: relative; } .dot { position: absolute; left: 0; top: 0; width: 60px; height: 100%; border-radius: 20px; background-color: #bdc3c7; transition: all .3s ease; display: none; } .dot::before { content: ""; position: absolute; top: -11px; width: 10px; height: 10px; background-color: #8e44ad; border-radius: 50%; border: 4px solid #8e44ad; box-shadow: 0 0 10px 0 #8e44ad; } .ball:hover { color: #8e44ad; } .ball:hover .dot { animation: move 2s infinite linear; display: block; } @keyframes move { 0% { transform: translateX(0) rotate(0); } 30% { transform: translateX(calc(200px - 60px)) rotate(0); } 50% { transform: translateX(calc(200px - 60px)) rotate(180deg); } 80% { transform: translateX(0) rotate(180deg); } 100% { transform: translateX(0) rotate(360deg); } } ``` ### 一阵波浪效果 ![4.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d423e8947e394bd9b9a326b74bd2821a~tplv-k3u1fbpfcp-watermark.image?) 伪元素实现边框，`hover`后显示边框，逐渐放大，宽度逐渐缩小，透明度逐渐降为0。 ```css .boom { background-color: #16a085; color: #fff; position: relative; z-index: 1; } .boom::before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; right: 0; border: 2px solid #16a085; border-radius: 20px; transform-origin: center; } .boom:hover::before { transform: scale(1.25); transition: all ease-out .5s; border: 1px solid #96f3e0; opacity: 0; } ``` ### 气泡效果 ![5.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c85ece2aa6364616b4db5a7d173afeaf~tplv-k3u1fbpfcp-watermark.image?) 伪元素实现的圆形居中，之后逐渐放大，按钮元素设置`overflow:hidden`。 ```css .circle { background-color: #e74c3c; color: #fff; position: relative; z-index: 1; overflow: hidden; } .circle::before { content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; width: 1rem; height: 1rem; transform: translate3d(-50%,-50%,0) scale(0,0); border-radius: 50%; background-color: #c0392b; transform-origin: center; transition: ease-in-out .5s; } .circle:hover::before { transform: translate3d(-50%,-50%,0) scale(15,15); } ``` ### 立体效果 ![6.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2b80ffb065ec4455adba3cd28017e0ef~tplv-k3u1fbpfcp-watermark.image?) 使用`box-shadow`来实现这个立体的效果，`active`之后按钮元素向下移动，同时纵向阴影减少就可以达到这个效果，我用了好几层`text-shadow`来加深文字的阴影效果。 ```css .three-d { color: #fff; background-color: #f1c40f; text-shadow: -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0), -2px 2px 2px rgb(209 132 0); box-shadow: 0px 15px 0px 0px #f39c12; transition: all .5s; } .three-d:hover { background-color: #fcdc5e; } .three-d:active { transform: translate(0,4px); box-shadow: 0px 1px 0px 0px #f39c12; } ``` ## 结语以上就是本期的内容，纯属娱乐。如有纰漏，欢迎指出！