Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use pure CSS to achieve a small ball into a rectangular background button hover effect, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Code interpretation

Define dom, with an unordered list in the navigation and a list item in the list:

Home

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background-color:lightyellow

}

Hide the boot symbol at the front of the list item:

Navul {

Padding:0

List-style-type:none

}

Set the container size:

Navli {

Width:8em

Height:2em

Font-size:25px

}

Set the text style:

Navli {

Font-size:25px

Text-align:center

Line-height:2em

Font-family:sans-serif

Text-transform:capitalize

}

Add pseudo elements, which are 2 balls:

Navli {

Position:relative

}

Navli::before

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

Navli::before {

Top:calc (50%-0.6em/2)

Left:0

}

Navli::after {

Bottom:calc (50%-0.6em/2)

Right:0

}

Next, set the button hover effect.

When the mouse hovers over the button, let the ball become a rectangle equal to the size of the container:

Navli:hover::before

Navli:hover::after {

Width:100%

Height:100%

Border-radius:0

}

One of the rectangles is slightly dislocated to the lower right corner and deepens its color to form a shadow effect:

Navli:hover::before {

Z-index:-1

Top:0

}

Navli:hover::after {

Z-index:-2

Bottom:-0.4em

Right:-0.4em

Filter:brightness (0.8)

}

Set the color of the hover, the rectangular background of the pseudo element turns blue, and the text turns white:

Navli:hover {

Color:white

}

Navli:hover::before

Navli:hover::after {

Background-color:dodgerblue

}

Set the ease time, where the pseudo element's ease time function uses anthropomorphic animation:

Navli {

Transition:0.5s

}

Navli::before

Navli::after {

Transition:0.5scubic-bezier (0.5 ~ 0.50 ~ 0.25 ~ 1.5)

}

Add a few more buttons:

Home

Products

Services

Contact

Finally, increase the spacing between the buttons:

Navli {

Margin:0.8em

}

Thank you for reading this article carefully. I hope the article "how to use pure CSS to realize the button hovering effect of changing a small ball into a rectangular background" is helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.