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.

Don't play with Jazbaat, play with JavaScript instead. It's actually fun. If you already follow me, please don't unfollow me because of this bio.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store