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

Editor to share with you how to use pure CSS code to achieve the animation effect of the three-dimensional button with metal luster, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Code interpretation

Define a container in dom:

BUTTON

The container is centered to display:

Html,body {

Height:100%

Display:flex

Align-items:center

Justify-content:center

Background-color:skyblue

}

The 2d style of the button is set, and variables are used to resize the button:

.box {

Background:linear-gradient (toright,gold,darkorange)

Color:white

-- width:250px

-height:calc (var (--width) / 3)

Width:var (--width)

Height:var (--height)

Text-align:center

Line-height:var (--height)

Font-size:calc (var (--height) / 2.5)

Font-family:sans-serif

Letter-spacing:0.2em

Border:1pxsoliddarkgoldenrod

Border-radius:2em

}

Set the 3D style of the button

.box {

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

Text-shadow:6px3px2pxrgba (0Pert 00.2pm)

Box-shadow:2px005pxrgba (0Pert 00.2pm)

}

Define the mouse-over animation effect of the button:

.box: hover {

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

Text-shadow:-6px3px2pxrgba (0Pert 00.2pm)

Box-shadow:-2px005pxrgba (0Pert 00.2pm)

}

.box {

Transition:0.5s

}

To add luster with pseudo elements:

.box {

Position:relative

}

.box:: before {

Content:''

Position:absolute

Width:100%

Height:100%

Background:linear-gradient (toright,transparent,white,transparent)

Left:0

}

Define the glossy animation effect:

.box:: before {

Left:-100%

Transition:0.5s

}

.box: hover::before {

Left:100%

}

Finally, hide what is outside the container:

.box {

Overflow:hidden

}

The great task has been completed!

The above is all the contents of this article entitled "how to use pure CSS code to achieve the animation effect of a metal glossy stereo 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.