Creating Glossy button with QML

Recently while working on my pet QML project I created reusable glossy QML button element. Hope it will help someone.

Well it quite simple to achieve this, I used Gradient element with right color combination and proper mouse event handling. Following is output.

Here is code for Button element from Button.qml

import Qt 4.7

Rectangle {
    id: button
    signal clicked
    property alias text: btnText.text

    height: 50
    //radius: 10
    border.color:"#6a6363"

    gradient: off

     Gradient {
        id:off
        GradientStop { position: 0.0; color: "lightsteelblue" }
        GradientStop { position: 0.5; color: "lightsteelblue" }
        GradientStop { position: 0.5; color: "black" }
        GradientStop { position: 1.0; color: "black" }
    }

    Gradient {
        id:onn
        GradientStop { position: 0.0; color: "steelblue" }
        GradientStop { position: 0.5; color: "steelblue" }
        GradientStop { position: 0.5; color: "black" }
        GradientStop { position: 1.0; color: "black" }
    }

    Text {
        id:btnText
        anchors.centerIn:parent
        color:"white"
        text: "text"
    }

    MouseArea {
            id: mouseArea
            anchors.fill: parent
            onClicked:  {
                button.clicked();
            }

            onEntered:{
                button.gradient=onn
                border.color= "steelblue"
            }

            onCanceled:{
                border.color= "#6a6363"
                button.gradient=off
            }

            onExited: {
                border.color= "#6a6363"
                button.gradient=off
            }
        }
}

Following is how you can use above Button element.

    Button {
        anchors.centerIn:parent
        text: "Test Button"
        width: parent.width/2 -10

        onClicked: {
            console.log("Add folder clicked");
        }
    }