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