qml example: make gradient color

Example to make gradient color on button.

make gradient color on button

import QtQuick 2.0

Rectangle {
    width: 360
    height: 360

    Rectangle {
        id: myButton

        width: 200
        height: 120
        radius: 25
        anchors.centerIn: parent

        property color buttonColor: "white"
        property color buttonColorPressed: "gray"
        property color buttonBorderColor: "gray"
        property color buttonBorderColorPressed: "black"

        signal signalMe(string action)
        onSignalMe: console.log(action)

        MouseArea{
            id: myButtonMouseArea
            anchors.fill: parent

            onClicked: myButton.signalMe("Clicked")
            onPressed: myButton.signalMe("Pressed")
            onReleased: myButton.signalMe("Released")
        }

        /* pure color, change with mouse pressed
        color: myButtonMouseArea.pressed
               ? buttonColorPressed : buttonColor
        */

        /* gradient color, no change with mouse pressed
        gradient: Gradient {
            GradientStop { position: 0.0; color: "black" }
            GradientStop { position: 1.0; color: "gray" }
        }*/

        //gradient color, changed with mouse pressed
        gradient: Gradient {
            GradientStop {
                position: 0.0;
                color: myButtonMouseArea.pressed ? "black" : "gray" }
            GradientStop {
                position: 1.0;
                color: myButtonMouseArea.pressed ? "gray" : "white" }
        }

        border.width: 2
        border.color: myButtonMouseArea.pressed
                      ? buttonBorderColorPressed : buttonBorderColor

        Text{
            id: buttonLabel
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
            }
            color: "black"
            text: "Button Label"
        }

        Image {
            id: buttonImage
            source: "http://goo.gl/kdbgF8"
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: buttonLabel.bottom
            }
        }
    }
}

---

qml button step-by-step