0

I want to create Something like this Special Arc Buttons through css and i have done something like this

HTML

<div class="main-button">
<span class="text-in">GRAPHIC DESIGN</span>

</div>

CSS


.main-button {
       border-top-right-radius: 50%;
    border-top-left-radius: 50%;
    background-color: transparent;
    border: solid 1px black;
    width: 100px;
    height: 100px;
    margin: 0 auto;
    border-bottom: none;
    position: relative;
}

span.text-in {
      font-family: 'Playfair Display';
    font-weight: 600;
    position: absolute;
    bottom: 0;
    left: -4px;
    /* right: 44px; */
    background: transparent;
    z-index: 5;
}

don't know if there's css property to small the height of left border or text come above the border so that it won't appear like this or https://jsfiddle.net/az30xfkL/

deepak kumar
  • 1
  • You need to give the text the same `background-color` as the main background color, this way the text will hide a part of the border. Change to `span.text-in { background: White }`. – Rene van der Lende Jan 05 '23 at 15:53

0 Answers0