CODEWITHSUNDEEP
htmlcss
Jorge
Jorge

Reputation: 18237

Create a Gradient For this button

I was trying to achieve this effect for a background button, notices that the effect it's a like a wave. Is there a some way that i can defined a gradient or a css function to accomplish this?

enter image description here

The most that I can get it's a gradient for a vertical or horizontal line but not like a Wave

Upvotes: 4

Views: 168

Answers (3)

Vitalii Maslianok
Vitalii Maslianok

Reputation: 1631

I'm not an expert in CSS, but here's my solution (pure CSS). Tested only in FF.

wave line pure CSS

DEMO

modified in accordance with the example:

wave line pure CSS

DEMO

Upvotes: 4

Mark
Mark

Reputation: 5720

There is no easy way to do this if its even possible with just CSS. The closest you could get is some combination of a :before and :after pseudo class each with their own radial gradient, but even then it won't match exactly.

You could also use multiple gradients stacked but again not an exact match.

Upvotes: 2

night11
night11

Reputation: 58

I think this might help you CSS Gradient Button and here

Upvotes: -1

Related Questions