Transparent rounded button with gradient border

Question

Firstly, I have searched SO for similar questions and there are many but none which have the exact requirements below.

I am trying to create the button below using pure css.

It has the following requirements.

1. It has a 1px border with a horizontal gradient.
2. It must be transparent.
3. It must have rounded corners
4. It will have a cut-out of the border which is also transparent.
5. It must be variable width and height
6. It should work in all modern browsers (not IE)

I have created a Code Sandbox which gets all of it right except the border-radius. I have used a polygon clip-path for the cut out and used border-image for the gradient which is why the border-radius doesn't work.

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  
  background-color: transparent;

  border: solid 1px;
  border-radius: 6px;
  border-image: linear-gradient(to left, #743ad5 0%, #d53a9d 100%);
  border-image-slice: 1;

  clip-path: polygon(0 0, 12px 0, 12px 1px, 24px 1px, 24px 0, 100% 0, 100% 100%, 0 100%);

}

 <div style="padding:40px;">
			<a class="button">This is a button</a>
		</div>

https://codesandbox.io/s/kw9p9k5073

I have managed to avoid using svgs so far as I don't really understand them well enough to implement a solution properly but if I have to go down that path I will.

Any advice would be very much appreciated.

Answer 1

Considering the fact that you will have an horizontal gradient with 1px border we can simulate this by creating a multiple background layer. The left and right border can be considered as a solid color (since it's an horizontal gradient) and only the top/bottom need to really be gradient.

The tricky part is to find the percentage value for the top gradient in order to have the transparent gap and keep it the same as the bottom one. For this I used some math to find the correct values.

I made the border 2px to better see the result

body {
  font-family: sans-serif;
  background-color: #232837;
}

.button {
  cursor: pointer;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  color: white;
  border:2px solid transparent;
  border-radius:10px;
  border-right-color:#743ad5;
  border-left-color:#d53a9d;
  background:
    linear-gradient(to left,
      rgb(116, 58, 213) 0%, rgb(186, 58, 143) 70% ,
      transparent 70%,  transparent 85%, 
      rgb(201, 58, 128) 85%, rgb(213, 58, 157) 100%) top/100% 2px,
    linear-gradient(to left, #743ad5 0%, #d53a9d 100%) bottom/100% 2px;
  background-repeat:no-repeat;
}

<a class="button">This is a button</a>
<a class="button">This is a long button</a>
<a class="button" style="padding:10px">This is a very long button</a>