高级渐变效果按钮CSS3

Question

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

Answer 1

它实际上是可能的，但不是仅适用于CSS梯度。

您必须使用SVG的曲线，鼠标悬停在一个梯度产生这样的效果。

.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; 
 
}

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