アドバンスグラデーションエフェクトボタンCSS3

Question

CSSでグラデーションエフェクトを学習していますが、このボタンを見つけたので、同じボタン効果を作成するためにインターネット上のソリューションを探すために多くの検索を行いました。それは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>