How to use pure CSS to realize the button hovering effect of a small ball changing into a rectangular background
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!
