QML add gradient animation during state transition

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

Rectangle {
    
	anchors.centerIn: parent

    width: 75; height: 75
    id: button
    state: "NORMAL"
	Text{
    
		text: "button"
		anchors.centerIn: parent
        }

    MouseArea {
    
        anchors.fill: parent
        onEntered: button.state = "ENTERED"
        onExited: button.state = "NORMAL"
        onPressed: button.state = "PRESSED"
		onReleased: button.state = "ENTERED"
		hoverEnabled: true
        }

    states: [
        State {
    
            name: "ENTERED"
            PropertyChanges {
     target: button; color: "lightblue"
                }
            },
        State {
    
            name: "NORMAL"
            PropertyChanges {
     target: button; color: "lightgray"
                }
            },
		State {
    
			name: "PRESSED"
			PropertyChanges {
     target: button; color: "pink"
                }
            }
        ]

    transitions: [
        Transition {
    
            from: "ENTERED"
            to: "NORMAL"
            ColorAnimation {
     target: button; duration: 500
                }
            },
        Transition {
    
            from: "NORMAL"
            to: "ENTERED"
            ColorAnimation {
     target: button; duration: 500
                }
            },
		Transition {
    
            from: "ENTERED"
            to: "PRESSED"
            ColorAnimation {
     target: button; duration: 200
                }
            },
		Transition {
    
            from: "PRESSED"
            to: "ENTERED"
            ColorAnimation {
     target: button; duration: 200
                }
            },
		Transition {
    
            from: "PRESSED"
            to: "NORMAL"
            ColorAnimation {
     target: button; duration: 500
                }
            }
        ]
    }
}

The effect is as follows ：