How Css Transition Work With Line Gradient Background Button

Posted By Bajarangi soft , Posted On 13-10-2020

In CSS, you can smoothly make transitions between two or more colors. CSS has two types of gradients:

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, #800000, white);
        }
        button:hover {
            background-image:
                    linear-gradient(to bottom right, #d23318, yellow);
        }

        h1 {
            color: #e013ac;
        }
    </style>
</head>
<body>
<center>
    <h1>BAJARANGI SOFT</h1>
    <b>Hover over the bytton</b>
    <br>
    <br>
    <button>Click me</button>
</center>
</body>
</html>

Related Post

How To Use CSS Style Transition Properties With JavaScript
Transition Shot hand Width Multiple Properties In Css
How Css Transition Work With Line Gradient Background Button
How To Use CSS Transition Property For HTML Elements
How To Use CSS Transition Timing Function Property
How To Use CSS Transition Delay Property With HTML
How Do I Use CSS Transition And Transform Properties
How To Transition To New Page With Slide Left To Right In Flutter
How To Make Button With Transition Effect Animation Hover Using CSS