如何在CSS中为按钮创建这个手绘边框？

o4hqfura 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(128)

我看过这个问题，其实是个好建议
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>

css

来源：https://stackoverflow.com/questions/75985859/how-can-i-create-this-hand-drawn-border-in-css-for-a-button

1条答案

按热度按时间

w1jd8yoj1#

不幸的是，我不是一个设计师，所以我相信你可以改善我的尝试。
我使用SVG创建了一个椭圆，其中有一个断点，并使用SvgPathEditor创建了贝塞尔曲线。
然后，我使用URL-encoder for SVG工具将其转换为背景图像url。
然后我使用了background-position和background-size属性来定位它。我相信如果你摆弄它，你会让它看起来比我做的更好。下面的代码

body {
  background-color:black;
}
.button {
  --ellipse-colour: #7D65FF;
  --text-colour: white;
  color:var(--text-colour);
  font-weight:700;
  padding:1rem 2rem;
  width: fit-content;
  background-image: 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0.1 0 8.6 2.9'%3E%3Cpath d='M 4.8 0.3 C 0 -0.6 -1.1 2 3.8 2.7 C 7.7 3.2 8.7 1.8 6.2 0.7' stroke='%23BEA3FF' stroke-width='0.2' fill='none'/%3E%3C/svg%3E"),
    radial-gradient(var(--ellipse-colour) 60%,transparent 63%);
  background-repeat:no-repeat;
  background-size: 115% 100%,auto;
  background-position:20% 50%;
  cursor:pointer;
  transition: all 500ms;
}

.button:hover {
  --ellipse-colour: #EEECF9;
  --text-colour: #7E66FF;
}

<div class='button'>Get Started</div>

下面是一个使用：：before伪元素的版本，它使用mask覆盖一个椭圆来显示下面的内容。行中差距是使用圆锥渐变添加的。

body {
  background-color:black;
}
.button {
  position: relative;
  --ellipse-colour: #7D65FF;
  --text-colour: white;
  --line-colour: #BEA3FE;
  color:var(--text-colour);
  font-weight:700;
  padding:1rem 2rem;
  width: fit-content;
  background-image: 
    radial-gradient(var(--ellipse-colour) 60%,transparent 63%);
  background-repeat:no-repeat;
  cursor:pointer;
  transition: all 500ms;
  --angle: 6deg;
}
.button::before {
  margin:0rem 0.4rem;
  position:absolute;
  content:"";
  inset:0;
  border-radius:50%;
  -webkit-mask: radial-gradient(transparent 63%, white 65%);
  mask: radial-gradient(transparent 63%, white 65%);
  transform: rotate(var(--angle));
  background-image: conic-gradient(var(--line-colour) 50deg, transparent 50deg, transparent 70deg, var(--line-colour) 70deg);
  transition:transform 1000ms;
}

.button:hover {
  --ellipse-colour: #EEECF9;
  --text-colour: #7E66FF;
  --line-colour: #7D66FF;
  --angle:0deg;
}

<div class='button'>Get Started and things</div>

赞(0）回复(0）举报 2023-04-13

我来回答

如何在CSS中为按钮创建这个手绘边框？

1条答案

相关问题

热门标签

最新问答