How to create line extension of a button-CodePudding

I would like to ask if this is possible, I'm trying to achieve this design which has a curve line extension of a button/ or <a> tag. my first choice is to export this line image and insert it after the button. but is there any ways of CSS styling that can make this possible,

Any suggestion would be greatly appreciated! Thank you

CodePudding user response：

It certainly is possible, I'm just not sure whether it's advisable. Anyway, you can use an absolutely positioned pseudo element but as always with absolute positioning, you have to be careful when it comes to responsiveness. In the example, I'm using quite a lot of magic numbers which I don't really like.

I would probably rather use JavaScript and SVG to make the line properly positioned/sized on all devices.

Anyway, here's a CSS solution:

body {
  padding: 200px 50px;
}

button {
  position: relative;
  background-color: #92701b;
  border-radius: 999px;
  font-size: 1rem;
  color: #fff;
  border: 0;
  font-weight: 600;
  padding: 14px 25px;
  letter-spacing: 0.5px;
}

button:after {
  content: "";
  position: absolute;
  bottom: 21px;
  left: 100%;
  width: 200px;
  height: 200px;
  border-radius: 0 0 30px 0;
  border: 4px solid #d76f46;
  border-top: none;
  border-left: none;
}

<button>Polyethylene</button>