Disclaimer: This is probably one of the most useless articles you will come across. This is basically me just explaining myself how to make a CSS button with a gradient border(more details below). If you want to understand that(or maybe want the code for it) feel free to go further.
Backstory(that no one asked for apparently): I wanted to make a Button for a website with border-gradient and transparent background with curved border and I wasn’t able to find fuss-free code for it, so here’s me making one for myself. Once again this is as useless as it sounds, so don’t tell me I didn’t warn you.
So basically the border is transparent as evident from the code. Instead there is a white background and kind of an outline of a colour gradient which is a part of the background itself which is overlaying the real transparent background and all this is being done with background-image. Then to make sure that the image that we have made for the background extends up to the content as well as the border we use:
background-clip: content-box, border-box;
And we are applying background origin so that the background image starts from the border. Rest of it is just some basic CSS.
Also, for a similar gradient hover effect just change the colours from white to the gradient colours of the border.
Just in case you are interested, you can read more about background-clip and background-origin here and here respectively.
