高級漸變效果按鈕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>