How to use pure CSS to achieve the hover effect of buttons (source code attached)

The content of this article is about how to use pure CSS to achieve the hover effect of buttons (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. helped.

Effect preview

Source code download

https://github.com/comehope/front- end-daily-challenges

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;
}

Set the button's border and background style. The background uses a gradient color, but the direction of the gradient alternates in sequence:

ul li {
    box-sizing: border-box;
    width: 15em;
    height: 3em;
    font-size: 20px;
    border-radius: 0.5em;
    margin: 0.5em;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
}

ul li:nth-child(odd) {
    background: linear-gradient(to right, orange, tomato);
}

ul li:nth-child(even) {
    background: linear-gradient(to left, orange, tomato);
}

Set the button The style of the text above, alternately left or right:

ul li {
    color: white;
    font-family: sans-serif;
    text-transform: capitalize;
    line-height: 3em;
}

ul li:nth-child(odd) {
    text-align: left;
    padding-left: 10%;
}

ul li:nth-child(even) {
    text-align: right;
    padding-right: 10%;
}

Set the perspective effect of the button, rotate left and right alternately, the perspective distance at this time is 500px, please note The order of the perspective() function and the rotateY() function cannot be written in reverse:

ul li:nth-child(odd) {
    transform: perspective(500px) rotateY(45deg);
}

ul li:nth-child(even) {
    transform: perspective(500px) rotateY(-45deg);
}

Adds a hover effect to the button, so that the perspective distance when hovering is shortened to 200px, the longer the perspective distance The shorter, the larger the rotation will appear:

ul li:nth-child(odd):hover {
    transform: perspective(200px) rotateY(45deg);
    padding-left: 5%;
}

ul li:nth-child(even):hover {
    transform: perspective(200px) rotateY(-45deg);
    padding-right: 5%;
}

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

ul li {
    transition: 0.3s;
    cursor: pointer;
}

You're done!

The above is the detailed content of How to use pure CSS to achieve the hover effect of buttons (source code attached). For more information, please follow other related articles on the PHP Chinese website!