1

I am trying to create the following button effect with css.

enter image description here

The html code for the buttons area is like this:

<div id="background">
<div id='button_region'>
  <div class="button">
     <a href="#">Services</a>
  </div>
  <div class="button">
     <a href="#">Support</a>
  </div>
</div>
</div>

I asked chatGPT, and he suggested using clip-path, though, I still haven't been able to make it work.

How do code this css?

j08691
  • 204,283
  • 31
  • 260
  • 272
justadev
  • 1,168
  • 1
  • 17
  • 32

1 Answers1

-1

if you want to get that result you don't have to use clip-path you can achieve that result by using simple css too. here is code snippet. ask me if you don't understand anaything regarding this code.

* {
  text-decoration: none;
  color: white;
}
.button {
  background-color: gray;
  display: inline-block;
  padding: 5px 30px 5px 40px;
  border-radius: 25px 0 0 25px;
  margin: 0 30px 0 10px;
  position: relative;
}
.button a::before {
  content: "<";
  position: relative;
  left: -20px;
}
.button a::after {
  content: "";
  position: absolute;
  right: -20px;
  top: -9px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: red;
  border: 3px solid white;
  background: url("https://i.stack.imgur.com/xa3We.jpg?s=256&g=1");
  background-size: contain;
  background-position: center;
}
<div id="background">
  <div id='button_region'>
    <div class="button">
      <a href="#">Services</a>
    </div>
    <div class="button">
      <a href="#">Support</a>
    </div>
  </div>
</div>
UNRIVALLEDKING
  • 265
  • 3
  • 15
  • Thanks for your answer. The issue is that your solution is using a white border around the circle. It will not work if the background is an image. – justadev Dec 15 '22 at 17:28
  • @justadev bro you can change color of that border to transparent and even use border-image property – UNRIVALLEDKING Dec 16 '22 at 06:35
  • I tried. But making the border transparent makes it show the button that is behind, not the background. The "inverse circle" solution is the right approach – justadev Dec 16 '22 at 08:17