纯 CSS 制作赛博朋克 2077 “故障风”按钮

纯 CSS 制作赛博朋克 2077 “故障风”按钮

大家好，我是 Steven。

虽然我不打机，但我都知道 赛博朋克 2077 这个游戏，在它的网页上，有一个 Available Now 的按钮，当游标移到它之上的时候，会有一个好像故障的毛刺效果。

这一期，我们就会模仿并且实现这个效果。

这个教程的视频版在 https://www.bilibili.com/video/BV15A411s7cX ，欢迎三连关注！

编写 HTML 代码

打开 CodePen 编辑器 ( https://codepen.io )，在 HTML 的部份加入 <button> 标签，按钮的标题是 AVAILABLE NOW。

CSS 的部分

然后到 CSS 的部份，加入 body 标签，用 Flexbox 的方法将内容设定为上下左右置中。然后背景颜色，设定为黄色，加入 button 选择器，宽度设定为 380px，而高度设定为 86px，文字大小设定为 36px。

然后我想换一种字型，到 Google Font 网站上，选择了 Bebas Neue 这个字型，将载入字体的代码贴到 HTML 内，然后将 CSS 字体的设定套用到 button 选择器内。

好了，将左下角变为斜角可以怎样做呢，一开始我想用 clip-path 去实现，但我想了又想，好像有一种更简单的方法，就是透过 linear-gradient 设定背景图片了。设定 background 是 linear-gradient()，角度设定为 45deg，然后由透明色的 50%，切换为红色的 50%，这样 50% 前的部份就会透明，而 50% 后的部份就是红色，做到一个颜色分割的效果。

那我们要将红色的部份占大多数，只需要将 50% 改为 5%，就可以做到左下的斜角了。

然后框线设定为 0，文字颜色设定为白色，letter-spacing 字距设定为 3px，然后我觉得文字的上下有点不对齐，设定 line-height 是 88px，这样就好一点了。

然后设定右边的亮蓝色边，将 box-shadow 设定为 6px 0px 0px #00E6F6，再将 outline 设定为 transparent，这样当点击按钮的时候，就不会有浏览器预设的按钮边框了。

现在按钮的样式大致上都实现了，那么怎样实现当游标移到它之上的时候，出现的那些毛刺效果呢？我们先在这个按钮上，重叠一个一模一样的按钮
要实现这一步，我会使用 Pseud