Bouncy buttons in Qt Quick / QML

Button.qml

import QtQuick 2.0

Rectangle {
    id: button
    width: 75
    height: 50
    radius: 10
    border.width: 2
    border.color: Qt.darker(color, 3)

    property real bounceHeight: 20
    property string text: "A button"
    signal bounce

    onBounce: {
        bounceAnimation.start()
    }

    Text {
        anchors.centerIn: parent
        text: parent.text
        color: "white"
        font.bold: true
        style: Text.Outline;
        styleColor: Qt.darker(parent.color, 3)
    }

    SequentialAnimation {
        id: bounceAnimation

        NumberAnimation {
            target: button
            properties: "y"
            to: -bounceHeight
            duration: 150
            easing {
                type: Easing.OutQuad;
            }
        }
        NumberAnimation {
            target: button
            properties: "y"
            to: 0
            duration: 600
            easing {
                type: Easing.OutBounce;
            }
        }
    }
}

main.qml

import QtQuick 2.0

Rectangle {
    width: 500
    height: 500

    Row {
        spacing: 25
        anchors.centerIn: parent

        Button {
            color: "red"
        }

        Button {
            color: "lime"
            text: "Click me!"

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    parent.bounce()
                }
            }
        }

        Button {
            color: "blue"
            text: "Clock me!"

            Timer {
                interval: 3000
                repeat: true
                running: true
                onTriggered: {
                    parent.bounce()
                }
            }
        }
    }
}