meegim/qml/Button.qml

import QtQuick 1.0

Rectangle {
    id: button
    width: 100
    height: 50

    smooth: true

    signal clicked
    property alias text: txtButton.text
    property alias fontSize: txtButton.font.pixelSize

    property alias icon: imgButton.source

    radius: 10
    gradient: Gradient {
        GradientStop { id: gr1; position: 0; color: "white" }
        GradientStop { id: gr2; position: 0.5; color: "#ededed" }
        GradientStop { id: gr3; position: 1; color: "#d7d7d7" }
    }

    border.color: "gray"

    Image {
        id: imgButton
        anchors.left: parent.left
        anchors.leftMargin: 0.1*button.width
        anchors.verticalCenter: parent.verticalCenter
        visible: button.icon != "" ? true : false
    }

    Text {
        id: txtButton
        anchors.centerIn: parent
        font.pixelSize: 28
    }

    Behavior on scale { NumberAnimation { duration: 80 } }

    MouseArea {
        id: ma
        anchors.fill: parent
        onClicked: {
            button.clicked()
        }
        onPressedChanged: {
            if( ma.pressed ) {
                button.scale = 0.98
                gr1.color = "#b7b7b7"
                gr2.color = "#b7b7b7"
                gr3.color = "#b7b7b7"
            } else {
                button.scale = 1.0
                gr1.color = "white"
                gr2.color = "#ededed"
                gr3.color = "#d7d7d7"
            }
        }
    }
}