Custom style for all Qt Quick Button Control states

Question

I'm looking for a way to create custom styles for all states of a button with QML. So far I have only found the following way to create a style that can be applied to multiple buttons

Component {
  id: leftButtonStyle

  ButtonStyle {

      background: Rectangle {
          width: control.width
          height: control.height
          color: "black"
      }

      label: Text {
          font.family: "Helvetica"
          font.pointSize: 10
          color: "#949599"
          text: control.text
      }
  }

}

Button {
    text:"Button One"
    style: leftButtonStyle
}

Button {
        text:"Button Two"
        style: leftButtonStyle
}

But this only changes the normal state of the button, and can not find a way to give a style when the botton is pressed.

Answer 1

In ButtonStyle, you can use control.hovered and control.pressed to determine, when button is being hovered or pressed.

  ButtonStyle {
     background: Rectangle {
        width: control.width
        height: control.height
        color: control.pressed ? "gray" : "black"
     }
  }

Answer 2

You can take a look at the example project named QtQuick Control Touch Gallery or you can see here for online version http://qt-project.org/doc/qt-5/qtquickcontrols-touch-content-buttonpage-qml.html