没有 SVG 的自定义按钮

Posted 2023-02-22

【中文标题】没有 SVG 的自定义按钮

【英文标题】：Custom button without SVG

【发布时间】：2021-04-26 20:42:06

【问题描述】：

我试图用不同的方式做一个按钮。 svg 工作，但不幸的是 SVG 不支持 Next.js 和 Material UI。我在下面提供代码和屏幕截图。

任何形式的帮助都会非常有帮助

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>

【问题讨论】：

相关：***.com/a/52455695/8620333

如果 SVG 可以用作 CSS 背景

感谢@FabrizioCalderan，这是一个非常好的选择

【参考方案1】：

您可以使用 css 的 clip-path 属性。我添加了一个示例，但您必须自己找出确切的值，以便它看起来像您想要的那样。参考见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>

编辑： 这样，部分边框也被“吃掉”了，请参阅 here 了解如何解决此问题。