这次给大家带来怎样实现六边形按钮特效，实现六边形按钮特效的注意事项有哪些，下面就是实战案例，一起来看一下。
代码解读
定义dom，容器中只包含 1 个按钮：
登录后复制
定义按钮样式：
nav { --h: 3em;}nav ul { padding: 0;}nav ul li { list-style-type: none; width: calc(var(--h) * 1.732); height: var(--h); background-color: #333; color: white; font-family: sans-serif; text-align: center; line-height: var(--h);}
登录后复制
用伪元素增加2个倾斜的矩形：
nav ul li { position: relative;}nav ul li::before,nav ul li::after { content: ''; position: absolute; top: 0; left: 0; width: inherit; height: inherit; background-color: #333;}nav ul li::before{ transform: rotate(60deg) translateX(calc(var(--h) * -2));}nav ul li::after{ transform: rotate(-60deg) translateX(calc(var(--h) * 2));}
登录后复制
增加鼠标划过效果：
nav ul li::before,nav ul li::after { z-index: -1; filter: opacity(0); transition: 0.3s;}nav ul li:hover::before { filter: opacity(1); transform: rotate(60deg) translateX(0);}nav ul li:hover::after { filter: opacity(1); transform: rotate(-60deg) translateX(0);}
登录后复制
dom 中增加几个按钮，形成一组按钮：
登录后复制
按钮之间为鼠标划过效果留出边距：
nav ul li { margin: 2em;}
登录后复制
再增加两组按钮：
登录后复制
最后，尝试一些变化：
nav { --h: 3em;}nav:nth-child(1) { --rate: 1.5; --bgcolor: black;}nav:nth-child(2) { --rate: 1.732; --bgcolor: brown;}nav:nth-child(3) { --rate: 2; --bgcolor: green;}nav ul li { width: calc(var(--h) * var(--rate)); background-color: var(--bgcolor);}nav ul li::before,nav ul li::after { background-color: var(--bgcolor);}
登录后复制
大功告成！
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS轮播停留效果实现步骤详解
linux后台运行node服务指令步骤方法
以上就是怎样实现六边形按钮特效的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2757501.html
