CSS Gradients

Example of Gradient (Run Example)

<!doctype html>
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            div
            {
                width:100px;
                height:50px;
                margin-top:10px;   /* leave a gap between each div */
                padding:10px;   /* put padding around the text inside the div */    
            }

            #default
            {    
                background:linear-gradient(#ff0000, #0000ff);
            }

            #top  /* same as default*/
            {   
                background:linear-gradient(to bottom, #ff0000, #0000ff);
            }

            #left 
            {  
                background:linear-gradient(to right, #ff0000, #0000ff);
            }

            #even_stops 
            {
                background:linear-gradient(to right, #ff0000, #0000ff, #ff0000, #0000ff, #ff0000);
            }

            #arbitrary_stops 
            {
                background:linear-gradient(to right, #ff0000, #0000ff 5%, #ff0000, #0000ff 95%, #ff0000);
            }

            #radial_center 
            {
                background:radial-gradient(circle, #0000ff, #ff0000);
            }

            #radial_position 
            {
                background:radial-gradient(closest-side at 80% 20%, #0000ff, #ff0000);
            }
        </style>
    </head>

    <body>
        <div id = "default">
            Default
        </div>

        <div id = "top">
            Top
        </div>

        <div id = "left">
            Left
        </div>

        <div id = "even_stops">
            Even stops 
        </div>

        <div id = "arbitrary_stops">
            Arbitrary stops 
        </div>

        <div id = "radial_center">
            Radial center 
        </div>

        <div id = "radial_position">
            Radial position
        </div>
    </body>
</html>
Write code to draw a diagonal gradient, as shown here.
Gradients can be placed on any element. Write code to place a circular gradient on buttons, as shown here.