Honeycomb navigation bar with CSS clip-path

This time I will show you how to use CSS3 clip-path property and .not() selector for animations

Final result (hover over buttons):

1) Link Font Awesome CDN in the document head.

2) Create basic markup for our ‘honeycomb’ grid:

<div class="social">
    <div>
        <a href="/">
            <div class="button">
                <i class="fab fa-facebook-f"></i>
            </div>
        </a>
        <a href="/">
            <div class="button">
                <i class="fab fa-instagram"></i>
            </div>
        </a>
    </div>
    <div>
        <a href="/">
            <div class="button">
                <i class="fab fa-youtube"></i>
            </div>
        </a>
        <a href="/">
            <div class="button">
                <i class="fab fa-linkedin-in"></i>
            </div>
        </a>
        <a href="/">
            <div class="button">
                <i class="fab fa-google-plus-g"></i>
            </div>
        </a>
    </div>
    <div>
        <a href="/">
            <div class="button">
                <i class="fab fa-twitter"></i>
            </div>
        </a>
        <a href="/">
            <div class="button">
                <i class="fab fa-pinterest-p"></i>
            </div>
        </a>
    </div>
</div>

3) We will be using clip-path property which unfortunately is not supported by Microsoft IE or Edge browser at the time of writing. If you’re interested in current browser support visit caniuse.com/clip-path The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. There is a great online tool at https://bennettfeely.com/clippy/ which allows you create and modify different shapes in CSS using clip-path.

#clip path property can be used to specify a part of an element to display

Now that we know what clip-path is we can style our grid:

.social {
    position: relative;
    margin: 50px auto;
    width: 200px;
    display: block;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: auto auto auto;
    border-radius: 100%;
}
.social > div {
    position: relative;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social > div:nth-of-type(1) {
    margin-bottom: -15px;
}
.social > div:nth-of-type(3) {
    margin-top: -15px;
}
.social > div:nth-of-type(3) {
    position: relative;
    top: 0; left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.button {
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
}
.button::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 50%; 
    width: 96%;
    height: 96%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 
                       50% 100%, 0% 75%, 0% 25%);
    background-color: black;
    transition: .2s;
    transform: translate(-50%, -50%) scale(1);
}
i {
    font-size: 30px;
     position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 10;
    transition: .2s;
}

Result should look like this:

4) Add ::after element to create inset shadow effect on half of our polygon shape. I used free tools at https://bennettfeely.com/clippy/ to create custom clip-path shape.

.button::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%; left: 50%; 
    width: 85%;
    height: 85%;
    clip-path: polygon(50% 0, 100% 25%, 
                       100% 75%, 50% 100%);
    background-color: rgba(255,255,255,.2);
    transition: .2s;
    transform: translate(-50%, -50%) scale(1);
}

5) Use :not() selector to apply styles to all elements that are currently not hovered.

The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prevents specific items from being selected, it is known as the negation pseudo-class.

.social:hover .button:not(:hover)::before,
.social:hover .button:not(:hover)::after
{
    transform: translate(-50%, -50%) scale(.85);
}
.button:hover::after,
.button:hover::before {
    transform: translate(-50%, -50%) scale(1.15);
}

Effects like this often have small animation glitch, when the last frames of animation jump few pixels or jiggle. According to my research the cause is still kind of a mystery, but somebody figured out by trial and error that applying backface-visibility: hidden to the parent element resolves the issue. Remember to try and apply it if some of your transition animations appear buggy.

That’s all for now. More guides coming later. Thank you for reading.