How to achieve hexagonal button special effects

This time I will show you how to implement hexagonal button special effects, and what are the precautions for realizing hexagonal button special effects. The following is a practical case, let’s take a look.

Code Interpretation

Define dom, the container only contains 1 button:

<nav>
    <ul>
        <li>Home</li>
    </ul>
</nav>

Define button style:

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

Use pseudo elements to add 2 tilts rectangle:

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

Add mouse over effect:

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

Add several buttons in dom to form a group of buttons:

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

The mouse over effect is between the buttons Leave some margin:

nav ul li {
    margin: 2em;
}

Add two more sets of buttons:

<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>

    

        
Home
        
Product Vs
        
Services
        
Contact
    

Finally, try some variations:

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

You’re done!

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to implement the JS carousel stay effect

##Linux background running node service instruction step method

The above is the detailed content of How to achieve hexagonal button special effects. For more information, please follow other related articles on the PHP Chinese website!