如何用纯 CSS 创作六边形按钮特效

以你之姓@ 2022-04-15 04:08 250阅读 0赞

![1504647-20181121124251835-466701548.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/xjoOeM][https_codepen.io_comehope_pen_xjoOeM]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/c/cQ74NAJ][https_scrimba.com_c_cQ74NAJ]

## 源代码下载 ##

[本地下载][Link 2]

每日前端实战系列的全部源代码请从 github 下载：

[https://github.com/comehope/front-end-daily-challenges][https_github.com_comehope_front-end-daily-challenges]

## 代码解读 ##

定义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>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>

按钮之间为鼠标划过效果留出边距：

nav ul li {
        margin: 2em;
    }

再增加两组按钮：

<nav>
        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>
    <nav>
        <ul>
            <li>Home</li>
            <li>Products</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>
    <nav>
        <ul>
            <li>Home</li>
            <li>Product Vs</li>
            <li>Services</li>
            <li>Contact</li>
        </ul>
    </nav>

最后，尝试一些变化：

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);
    }

大功告成！

原文地址：[https://segmentfault.com/a/1190000015020964][https_segmentfault.com_a_1190000015020964]

[1504647-20181121124251835-466701548.png]: /images/20220415/2577c92caa2145f2972c0dd2eb8bcf19.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=%2Fwp-content%2Fuploads%2F2018%2F11%2Ffront-end-daily-challenges-master%2F032-hexagonal-button-effects&demotitle=%E7%BA%AF%20CSS%20%E5%88%9B%E4%BD%9C%E5%85%AD%E8%BE%B9%E5%BD%A2%E6%8C%89%E9%92%AE%E7%89%B9%E6%95%88
[https_codepen.io_comehope_pen_xjoOeM]: https://codepen.io/comehope/pen/xjoOeM
[https_scrimba.com_c_cQ74NAJ]: https://scrimba.com/c/cQ74NAJ
[Link 2]: http://www.jqhtml.com/19283.html
[https_github.com_comehope_front-end-daily-challenges]: https://github.com/comehope/front-end-daily-challenges
[https_segmentfault.com_a_1190000015020964]: https://segmentfault.com/a/1190000015020964