Ainsley Belle Ainsley Belle - 4 months ago 14
CSS Question

Advance gradient effect button CSS3

I'm learning about gradient effects in css, then i found this buuton, i searched a lot to find any solution on internet to create same button effect. is that possible to create it in css?Button

tzi tzi
Answer

It's actually possible, but not with css gradient only.

You have to use an SVG for the curve, hover a gradient to have this effect.

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