Question

我正在学习css中的渐变效果，然后我发现了这个buuton，我搜索了很多，在互联网上找到任何解决方案来创建相同的按钮效果。可以在css中创建它吗？Button

Answer 1

它实际上是可行的，但不仅仅是css渐变。

您必须为曲线使用SVG，将鼠标悬停在此处才能产生此效果。

＆＃13;

.button {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 5px;
  border: 1px solid #FAB14C;
  
  /* Two background image: a SVG curve hover a linear-gradient */
  background-image: 
    url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg"><path d="M0,80 C50,100 50,0 100,20 L100,100 L0,100" fill="%23FAB14C"></path></svg>'),
    linear-gradient(to top, #FAB14C, white);
  
  /* The backgrounds are stretch to the element size */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  text-transform: uppercase;
  font-family: sans-serif;
  cursor: pointer;
}

＆＃13;

<button type="button" class="button">
  Edit this article
</button>

＆＃13;

高级渐变效果按钮CSS3

1 个答案: