How CSS transition work with linear gradient background button?
In CSS, you can smoothly make transitions between two or more colors. CSS has two types of gradients:
- Linear gradient: It goes down/up/left/right/diagonally and makes smooth transitions of colors. To make a linear transition you first have to choose two color stops. Color stops are the color among which you want to make the transitions. You can also select a starting point and a direction(an angle) for the transition.
background-image: linear-gradient(direction, color-stop1, color-stop2, …); - Radial gradient: It is defined by the center. Here also you have to specify at least two color spots.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ...);
Example:
<!DOCTYPE html> < html > < head > < title > Transition work with linear gradient background button </ title > < style > button { background-image: linear-gradient(to bottom right, green, white); } button:hover { background-image: linear-gradient(to bottom right, green, yellow); } h1 { color: green; } </ style > </ head > < body > < center > < h1 >w3wiki</ h1 > < b >Hover over the bytton</ b > < br > < br > < button >Click me</ button > </ center > </ body > </ html > |
Output: