How to create line extension of a button

Solution 1:

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>

How to create line extension of a button

Solution 1:

Related

Recent Posts