Rectangle {
     width: 200
     height: 200

     Rectangle {
         id: button
         x: 50
         y: 85
         width: 100
         height: 30
         smooth: true
         visible: true
         clip: true
         radius: 5
         border.color: "black"
         opacity: 1.0
         color: "white"

         Gradient {
             id: gradientEntered
             GradientStop { position: 0.0; color: "#FFAA11" }
             GradientStop { position: 0.17; color: "#FFAA22" }
             GradientStop { position: 0.98;color: "#555555" }
             GradientStop { position: 1.0; color: "#000000" }
         }

         Gradient {
             id: gradientStandart
             GradientStop { position: 0.0; color: "#BBBBBB" }
             GradientStop { position: 0.17; color: "#AAAAAA" }
             GradientStop { position: 0.98;color: "#555555" }
             GradientStop { position: 1.0; color: "#000000" }
         }

         gradient: gradientStandart

         states:[
             State {
                 name: "BUTTON_ENTERED"
                 PropertyChanges { target: button; gradient: gradientEntered}
             },
             State {
                 name: "BUTTON_EXITED"
                 PropertyChanges { target: button; gradient: gradientStandart}
             }
         ]

         MouseArea{
             anchors.fill:parent
             anchors.bottom: parent.bottom
             width:parent.width
             height: parent.height

             hoverEnabled: true
             onEntered: button.state = "BUTTON_ENTERED"
             onExited:  button.state = "BUTTON_EXITED"
         }
     }
}