import QtQuick 2.0 Rectangle{ id: blueButton width: Math.max(mainText.width+2*mm,8*mm) height: 5*mm color:"light blue" property alias fontColor: mainText.color border.color:"grey" border.width:1 radius: mm property alias text: mainText.text signal clicked state:"" Text{ id:mainText color: "black" anchors.centerIn: parent width: contentWidth height: contentHeight font.family:fontAwesome.name font.pixelSize: 3*mm text: "" } MouseArea{ id:buttonArea anchors.fill:parent onPressed: blueButton.state="Pressed" onReleased: blueButton.state="" onClicked: {parent.clicked()} } states: [ State { name: "Pressed" PropertyChanges { target: blueButton; color: "sky blue"} } ] transitions: [ Transition { to:"*" ColorAnimation { target: blueButton; duration: 100} } ] }