meegim/qml/ToolButton.qml

import QtQuick 1.0

Image {
    id: imgButton
    signal clicked
    property alias icon: imgButton.source
    property int pauseAnim: 0
    property int durationAnim: 400

    opacity: 1
    smooth: true
    Behavior on scale { NumberAnimation { duration: 150 } }

    Image {
        id: glowFrame
        source: "qrc:/qml/images/bar_glow.png"
        anchors.centerIn: parent
        Behavior on opacity { NumberAnimation { duration: 150 } }
        opacity:0
        scale: parent.scale
        smooth: true
    }

    states: [
        State {
            name: "normal"
            AnchorChanges {
                target: imgButton
                anchors.verticalCenter: parent.verticalCenter
            }
        },
        State {
            name: "hide"
            AnchorChanges {
                target: imgButton
                anchors.top: parent.bottom
            }
        }
    ]
    transitions: Transition {
        SequentialAnimation {
            PauseAnimation { duration: imgButton.pauseAnim }
            AnchorAnimation { duration: imgButton.durationAnim; easing.type: Easing.OutElastic }
        }
    }

    state: "hide"

    MouseArea {
        anchors.fill: parent
        onClicked: {
            imgButton.clicked()
        }
        onPressedChanged: {
            if( pressed ) {
                glowFrame.opacity = 1
                imgButton.scale = 0.95
            } else {
                glowFrame.opacity = 0
                imgButton.scale = 1.0
            }
        }
    }

    Component.onCompleted: imgButton.state = "normal"

}