html - Custom Button design

Question

I wanted to do a custom button. Tried many solution but couldn't actually get it done properly. Any help would be really appreciated, thanks in advance.

Attaching the screenshot & code below

span.button__publish {
    margin-left: 45px;
    position: relative;
}

.button__publish button {
    width: 137px;
    height: 37.3px;
    padding: 12.3px 38.5px 10px 37.5px;
    border-radius: 4px;
    background-color: #8ae38c;
}

.button__publish button span {
    font-family: SFUIDisplay;
    font-size: 13px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.8px;
    text-align: center;
    color: #0d0321;
    display: flex !important;
}

<span class="button__publish">
  <button size="medium" color="primary" class="publish">
    Publish
  </button>
</span>

question from:https://stackoverflow.com/questions/65831869/custom-button-design

Answer 1

This is how you do such a shape with an svg. Obviously you will need to adapt sizes to whatever you want to achieve.

Quick Explanation

• svg width and height are as you can imagine just the size of the svg
• polygon points - x,y coordinates of the corners - it goes like this - Top Left, Bottom Left, Bottom Right, Top Right. Use fill to change the "background color", use the stroke so you can join the corners with a radius.
• text is very self explanatory as well, position it in x and y and fill will be the text's color

<svg width="2000" height="2000">
    <polygon points="98 160, 100 200, 195 200, 205 155" style="stroke: green; stroke-width: 5; stroke-linejoin:round; fill:green"/>
   <text  fill="#fcfcfc" class="text" x=135 y=183>Text</text>
</svg>