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

This article mainly shows you how to achieve the button hover effect of pure CSS, the content is easy to understand, clear, hope to help you solve your doubts, the following let Xiaobian take you to study and learn "pure CSS how to achieve button hover effect" this article.

Code interpretation

Define dom. The container is an unordered list containing 4 elements, representing 4 buttons:

Home

Products

Services

Contact

Centered display:

Body {

Margin:0

Height:100vh

Display:flex

Align-items:center

Justify-content:center

Background:cornsilk

}

Remove the symbol in front of the list item:

Ul {

Padding:0

List-style-type:none

}

Style the border and background of the button. The background is graded, but the direction of the gradient alternates in turn:

Ulli {

Box-sizing:border-box

Width:15em

Height:3em

Font-size:20px

Border-radius:0.5em

Margin:0.5em

Box-shadow:001emrgba (0Pert 00.2pm)

}

Ulli:nth-child (odd) {

Background:linear-gradient (toright,orange,tomato)

}

Ulli:nth-child (even) {

Background:linear-gradient (toleft,orange,tomato)

}

Style the text on the button, alternating left or right:

Ulli {

Color:white

Font-family:sans-serif

Text-transform:capitalize

Line-height:3em

}

Ulli:nth-child (odd) {

Text-align:left

Padding-left:10%

}

Ulli:nth-child (even) {

Text-align:right

Padding-right:10%

}

Set the perspective effect of the button, rotate left and right alternately, and the distance of perspective is 500px. Note that the order of perspective () function and rotateY () function cannot be reversed:

Ulli:nth-child (odd) {

Transform:perspective (500px) rotateY (45deg)

}

Ulli:nth-child (even) {

Transform:perspective (500px) rotateY (- 45deg)

}

Add the hover effect to the button to shorten the perspective distance when hovering to 200px, and the shorter the perspective distance, the greater the rotation:

Ulli:nth-child (odd): hover {

Transform:perspective (200px) rotateY (45deg)

Padding-left:5%

}

Ulli:nth-child (even): hover {

Transform:perspective (200px) rotateY (- 45deg)

Padding-right:5%

}

Finally, set an ease time to smooth the effect transition:

Ulli {

Transition:0.3s

Cursor:pointer

}

The great task has been completed!

What are the selectors of css? css selectors can be divided into three categories, namely, id selector, class selector and tag selector. There can be many combinations between them, such as descendant selector, sub-selector, pseudo-class selector, general selector, group selector, and so on.

The above is about "how to achieve the button hover effect of pure CSS". If this article is helpful to you and think it is well written, please share it with your friends to learn new knowledge. if you want to know more about it, please pay more attention to 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.