어드밴스 그라디언트 효과 버튼 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>