如何用CSS实现按钮的手绘风格边框？设计师需求更复杂

我曾参考过Stack Overflow上的《Can I use CSS to distort borders so they look like sketched?》问题，其中的建议很实用，但我的设计师提出了更复杂的需求！我不清楚该如何实现这类按钮边框（如图所示：），是否应直接采用带背景图的div来实现？或是使用极椭圆形按钮，再将手绘边框图片置于按钮外围？

我尝试了以下方案，虽能生效，但每当按钮文本变更时都需调整边框位置，并非理想解决方案：

const bgImageStyle = {
  width: '300px',
  height: '50px',
  backgroundImage: `url("/assets/purple-border.png")`,
  backgroundSize: '280px 40px',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: '0 10px',
}

<button style={bgImageStyle}>
  Get Started Right Now
</button>

方案1：容器包裹分离内容与边框 #

让按钮自适应文本宽度，外层容器承载手绘边框背景，通过内边距预留边框空间，确保边框始终贴合内容，无需手动调整位置。

示例代码（React内联样式）：

const containerStyle = {
  display: 'inline-block',
  padding: '10px', // 匹配边框图的额外尺寸
  backgroundImage: `url("/assets/purple-border.png")`,
  backgroundSize: '100% 100%',
  backgroundRepeat: 'no-repeat',
};

const buttonStyle = {
  width: '100%',
  height: '100%',
  border: 'none',
  background: 'transparent',
  fontSize: '16px',
  // 自定义字体、颜色等样式
};

<div style={containerStyle}>
  <button style={buttonStyle}>可变长度的按钮文本</button>
</div>

方案2：伪元素实现无额外嵌套 #

利用按钮的::before伪元素承载边框背景，通过绝对定位让伪元素覆盖按钮外层，按钮设置内边距避免文本被边框遮挡，无需额外容器。

推荐用CSS类实现（内联样式无法直接控制伪元素）：

.sketched-button {
  position: relative;
  padding: 10px 20px; /* 预留边框空间 */
  border: none;
  background: transparent;
  font-size: 16px;
}

.sketched-button::before {
  content: "";
  position: absolute;
  top: -10px; /* 对应边框图的偏移量 */
  left: -10px;
  right: -10px;
  bottom: -10px;
  background-image: url("/assets/purple-border.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1; /* 让边框在按钮下方不遮挡内容 */
}

<button className="sketched-button">任意长度文本</button>

方案3：SVG矢量边框（适配缩放场景） #

如果能获取手绘边框的SVG文件，用SVG作为背景或内嵌元素，支持无损缩放，适配不同尺寸的按钮：

.svg-sketched-button {
  position: relative;
  padding: 10px;
  border: none;
  background: transparent;
}

.svg-sketched-button svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 不干扰按钮交互 */
}

<button className="svg-sketched-button">
  <svg viewBox="0 0 300 50" preserveAspectRatio="xMidYMid meet">
    {/* 这里嵌入SVG边框路径，或者用<use>引用外部定义 */}
    <path d="M10,25 C10,10 290,10 290,25 C290,40 10,40 10,25 Z" stroke="#8844dd" stroke-width="3" stroke-dasharray="5,3" fill="none"/>
  </svg>
  按钮文本
</button>

关键提示 #

• 确保边框图的比例与按钮内边距/偏移量匹配，避免拉伸变形
• 如需支持hover/active状态，可切换对应状态的背景图或调整伪元素样式
• 优先选择background-size: 100% 100%保证边框贴合容器，若边框有固定比例可改用contain

内容的提问来源于stack exchange，提问作者rmcsharry