How to use pure CSS to achieve the button hover effect of a small sphere with a rectangular background (with source)

This article brings you the content is about how to use the pure CSS to achieve a small rectangular background button hover effect (with source), there is a certain reference value, the need for a friend can refer to, I hope you have some help.

Effect Preview

Source code Download

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

Code interpretation

Defines the DOM, which contains an unordered table with a list item in the list:

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

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:lightyellow;}

To hide the boot symbol from the front of the list item:

Nav ul {    padding:0;    List-style-type:none;}

To set the container size:

Nav li {    width:8em;    Height:2em;    font-size:25px;}

To set the text style:

Nav li {    font-size:25px;    Text-align:center;    Line-height:2em;    Font-family:sans-serif;    Text-transform:capitalize;}

To add a pseudo-element, a pseudo-element 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%;}

Position the ball at 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 the 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;}

The first rectangle is shifted slightly to the right, and the color is deepened to 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);}

Sets the color of the hover, the background of the pseudo-element becomes blue, and the text turns white:

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

Set the easing time, where the slow-time function of the pseudo-element is animated with a anthropomorphic effect:

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 more buttons:

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

Finally, increase the spacing between the buttons:

Nav li {    margin:0.8em;}

Done!