Custom button without SVG

Question

I was trying to do a button with and I have tried in different ways. svg worked but unfortunately SVG is not supporting on Next.js & Material UI. I am providing the code and the screenshot below.

Any kind of help would be really helpful

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

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

*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>

related: https://stackoverflow.com/a/52455695/8620333 – Temani Afif Jan 22 '21 at 11:23 — Temani Afif, Jan 22 '21 at 11:23
if SVG works use it as a CSS background – Fabrizio Calderan Jan 22 '21 at 11:25 — Fabrizio Calderan, Jan 22 '21 at 11:25
Thanks @FabrizioCalderan that's a really good option – nazifa rashid Jan 22 '21 at 11:27 — nazifa rashid, Jan 22 '21 at 11:27

score 0 · Answer 1 · answered Jan 22 '21 at 11:31

You can use css's clip-path property. I added an example, but you have to find out the exact values yourself so that it looks like you want. For reference see the documentation on MDN.

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

.button__publish button {
    width: 137px;
    height: 37.3px;
    border-radius: 4px;
    background-color: #8ae38c;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

*emphasized text*
<span class="button__publish">
  <button class="MuiButtonBase-root MuiButton-root MuiButton-text publish MuiButton-textPrimary" tabindex="0" type="button">
   <span class="MuiButton-label">Publish</span>
  </button>
</span>

EDIT: this way part of the border is "eaten", too, see here for how to fix this.

Custom button without SVG

1 Answers1