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

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!

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.