Is there any way to add a border to a clip path css?

Question

I'm struggling to replicate the button style as in the image below. I've tried using clip path but I'm not getting the desired effect where there is a visible border and a semitransparent background.

Is there a simple workaround for this?

https://i.stack.imgur.com/kI5eX.png

Answer 1

Your idea to use clip-path should work out. Here's an approach

a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
    
  background-color: rgba(255, 0, 0, .3);
  box-shadow: inset 0 0 0 3px red;
  
  clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

a:before,
a:after {
  content: '';
  position: absolute;
  width: 3px;
  height: 30px;
  background-color: red;
}

a:before {
  left: 0;
  top: 100%;
  
  transform-origin: 50% 0%;
  transform: translateY(-20px) rotate(-45deg);
}

a:after {
  right: 0;
  bottom: 100%;
  
  transform-origin: 50% 100%;
  transform: translateY(20px) rotate(-45deg);
}

<a href="">Start my free session</a>

The only issue with this solution is the support for clip-path https://caniuse.com/?search=clip-path

Here's a codepen https://codepen.io/Hornebom/pen/912d2557034ba9c3936a06ced8584de4

Answer 2

To achieve an exact copy of this image the background needs to be an svg image.

however if your background is solid you can do the trick with just css like this

button {
  background-color: #bb000077;
  border: 2px solid #ff6666;
  font-weight: bold;
  color: #fff;
  font-size: 20px;
  padding: 15px 25px;
  position: relative;
  outline: none;
}

button::before,
button::after {
  content: '';
  pointer-events: none;
  position: absolute;
  width: 29px;
  height: 29px;
  background-color: #fff;
  transform: rotate(45deg);
}

button::after {
  top: -16px;
  right: -16px;
  border-bottom: 2px solid  #ff6666;
}

button::before {
  bottom: -16px;
  left: -16px;
  border-top: 2px solid  #ff6666;
}

<button>Start my free session</button