How to use pure CSS code to realize the animation effect of three-dimensional button with metallic luster
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!
