nooLight/GradientButton.qml

import QtQuick 2.0
import QtQuick.Controls.Material 2.2

Rectangle {
    id: root

    signal clicked()

    Gradient {
        id: pressedGradient

        GradientStop {position: 0.0; color: Material.color(Material.Grey, Material.Shade300)}
        GradientStop {position: 0.5; color: Material.color(Material.BlueGrey, Material.Shade300)}
        GradientStop {position: 1.0; color: Material.color(Material.Brown, Material.Shade300)}
    }

    Gradient {
        id: normalGradient

        GradientStop {position: 0.0; color: Material.color(Material.Grey)}
        GradientStop {position: 0.5; color: Material.color(Material.BlueGrey)}
        GradientStop {position: 1.0; color: Material.color(Material.Brown)}
    }

    MouseArea {
        id: ma

        anchors.fill: parent

        onClicked: root.clicked()
    }

    gradient: ma.pressed ? pressedGradient : normalGradient
}