How to use pure CSS code to achieve the hover effect of sliding in elements from both sides of the button
This article mainly shows you "how to use pure CSS code to achieve from both sides of the button into the element of the hover effect", the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian lead you to study and learn "how to use pure CSS code to achieve the hover effect of sliding elements from both sides of the button" this article.
Code interpretation
Define dom. The container is an unordered list, and list items represent buttons:
Home
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:linear-gradient (deepskyblue,navy)
}
Remove the symbol in front of the list item:
Ul {
Padding:0
List-style-type:none
}
Set the text style for the button:
Ulli {
Color:#ddd
Font-size:25px
Font-family:sans-serif
Text-transform:uppercase
}
Use pseudo elements to add a square to the left side of the button:
Ulli {
Position:relative
}
Ulli::before {
Content:''
Position:absolute
Width:100%
Height:100%
Background:tomato
Left:-100%
}
Add an underscore to the right of the button with pseudo elements:
Ulli::after {
Content:''
Position:absolute
Width:100%
Height:0.2em
Background:tomato
Bottom:0
Left:100%
}
Next, set the mouse hover effect.
When the mouse hovers, the square on the left moves to the location of the text:
Ulli::before {
Transition:0.4sease-out
}
Ulli:hover::before {
Left:100%
}
The underline on the right moves to the position of the text, and its animation time is delayed until the end of the box's animation:
Ulli::after {
Transition:0.3s0.3sease-out
}
Ulli:hover::after {
Left:0%
}
At the same time, increase the brightness of the text:
Ulli {
Transition:0.3s
Cursor:pointer
}
Ulli:hover {
Color:#fff
}
Hide the part outside the button so that neither the square nor the underscore is visible by default, and they enter from both sides only when the mouse hovers over:
Ulli {
Overflow:hidden
}
Finally, add a few more buttons to dom:
Home
Products
Services
Contact
Layout multiple buttons:
Ul {
Display:flex
Flex-direction:column
Align-items:center
}
Ulli {
Margin:0.5em
}
The above is all the content of the article "how to use pure CSS code to achieve the hover effect of sliding elements from both sides of the button". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
