All geek questions in one place

Create Gradient For This Button

I tried to achieve this effect for the background button, notices that the effect is like a wave. Is there a way I can define a gradient or css function to accomplish this?

enter image description here

At most, I can get a gradient for a vertical or horizontal line, but not like Wave

+4
source share
3 answers

I am not an expert in CSS, but here is my solution (pure CSS). Tested only in FF.

wave line pure CSS

Demo

modified as an example:

wave line pure CSS

Demo

+4
source

There is no easy way to do this, if possible even with CSS. The closest thing you could get is some combination: before and after the pseudo-class, each with its own radial gradient, but even then it will not exactly match.

You can also use several stacked gradients, but again not an exact match.

+2
source

I think this may help you CSS Gradient Button and here

-1
source

Source: https://habr.com/ru/post/1433707/

More articles:


All Articles