Button animation

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 340
    height: 480

    Rectangle {
        anchors.fill: button
        rotation: button.rotation
        radius: button.radius
        border {
            color: "gray"
            width: 2
        }
    }

    Rectangle {
        id: button
        property double k: 0
        height: 150
        anchors.centerIn: parent
        gradient: Gradient {
            GradientStop {
                position: 0.00
                color: Qt.hsva((56-button.k)/360, 0.47, 0.93, 1)
            }
            GradientStop {
                position: 1.00
                color: Qt.hsva((195-button.k)/360, 0.57, 0.80, 1)
            }
        }

        SequentialAnimation {
            id: gradientAnimation

            running: true
            loops: Animation.Infinite

            NumberAnimation {
                target: button; property: "k"
                from: 0; to: 100
                duration: 1500
                easing.type: Easing.InQuad
            }
            NumberAnimation {
                target: button; property: "k"
                from: 100;  to: 0
                duration: 1500
                easing.type: Easing.OutQuad
            }
        } // SequentialAnimation {

        state: "Round"
        states: [
            State {
                name: "Round"
                PropertyChanges {
                    target: button
                    radius: height/2
                    rotation: 35
                    width: 150
                }
            },
            State {
                name: "Quad"
                PropertyChanges {
                    target: button
                    radius: 3
                    width: 200
                    opacity: 0
                }
            }
        ] // states: [

        transitions: [
            Transition {
                NumberAnimation {
                    properties: "radius, rotation, width, opacity"
                    duration: 150
                }
            }
        ]
    } // Rectangle { id: button

    Text {
        id: textItem
        text: button.state
        font.pixelSize: 20
        anchors.centerIn: button
    }

    MouseArea {
        anchors.fill: button
        onClicked: {
            button.state = button.state == "Round" ? "Quad" : "Round";
        }
    }
}