CSS Button Gradient Border
Read more here: 👇
👉 The default CSS border property accepts only solid colors, you cannot provide a gradient there
👉 There is also a property called border-image but it is not compatible with border radius
So to fix this, a common solution is to use pseudo elements like this example. We have the after pseudo element for the foreground and the before pseudo element for the background.
The before element has the linear gradient as the background, and on hovering, we scale it to reveal the gradient as a kind of border
⚠️ One drawback is that the scaling is not even, so the border would appear thinner in the longer side and thicker in the shorter side
#css
#csstricks
#frontend
#webdesign
#javascript
#html
#coding
#programming
#reactjs
#vuejs
On this page of the site you can watch the video online CSS Button Gradient Border with a duration of hours minute second in good quality, which was uploaded by the user CodeMentor 21 August 2024, share the link with friends and acquaintances, this video has already been watched 3,096 times on youtube and it was liked by 200 viewers. Enjoy your viewing!
