Front-end daily combat: # 126 video demonstrates how to create pure CSS background ball alternating rectangular button hover effect

Results preview

Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.

https://codepen.io/comehope/pen/yxbEzJ

Interactive video

This video is interactive, you can pause the code video, editing video.

Please use chrome, safari, edge open view.

https://scrimba.com/p/pEgDAM/cGanPU6

Source code download

Daily front-end combat series full source code can be downloaded from github:

https://github.com/comehope/front-end-daily-challenges

Code Reading

Define dom, navigation contains an unordered list, the list there is a list of items:

<nav>
    <ul>
        <li>home</li>
    </ul>
</nav>

Centered:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightyellow;
}

Hidden front of the pilot symbol list item:

nav ul {
    padding: 0;
    list-style-type: none;
}

Setting container sizes:

nav li {
    width: 8em;
    height: 2em;
    font-size: 25px;
}

Setting text style:

nav li {
    font-size: 25px;
    text-align: center;
    line-height: 2em;
    font-family: sans-serif;
    text-transform: capitalize;
}

Add pseudo-elements, pseudo-elements is 2 balls:

nav li {
    position: relative;
}

nav li::before,
nav li::after {
    content: '';
    position: absolute;
    width: 0.6em;
    height: 0.6em;
    background-color: gainsboro;
    border-radius: 50%;
}

The ball is positioned in the left and right ends:

nav li::before {
    top: calc(50% - 0.6em / 2);
    left: 0;
}

nav li::after {
    bottom: calc(50% - 0.6em / 2);
    right: 0;
}

Next, set the button hover effect.

When the mouse hovers over the button, make a small ball into a rectangle equal to the size of the container:

nav li:hover::before,
nav li:hover::after {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

Wherein the first lower right corner of a rectangle slightly offset, and deepen its color, form a shadow effect:

nav li:hover::before {
    z-index: -1;
    top: 0;
}

nav li:hover::after {
    z-index: -2;
    bottom: -0.4em;
    right: -0.4em;
    filter: brightness(0.8);
}

Provided hover color, background rectangle pseudo-element to blue to white text:

nav li:hover {
    color: white;
}

nav li:hover::before,
nav li:hover::after {
    background-color: dodgerblue;
}

Set time easing, wherein easing function of time with a pseudo-element anthropomorphic animation:

nav li {
    transition: 0.5s;
}

nav li::before,
nav li::after {
    transition: 0.5s cubic-bezier(0.5, -0.5, 0.25, 1.5);
}

Add a few buttons:

<nav>
    <ul>
        <li>home</li>
        <li>products</li>
        <li>services</li>
        <li>contact</li>
    </ul>
</nav>

Finally, increasing the spacing between the buttons:

nav li {
    margin: 0.8em;
}

We're done!