title: Add background and font colour to a button with material design
body: <p>I am trying to design a login form with a material design on Qt which should look something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/Aq71o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Aq71o.png" alt="enter image description here"></a></p>
  
  <p>However I can't figure out how to add colour to the button in QML and change the font colour of the button text. This is what I have got so far:</p>
  
  <pre><code>import QtQuick 2.7
  import QtQuick.Controls 2.0
  import QtQuick.Layouts 1.3
  
  Item {
      property alias login: login
  
      Pane {
          id: pane
          x: 144
          y: 117
          width: 353
          height: 246
          clip: false
          font.strikeout: false
          background: Rectangle {
                  color: "#ffffff"
              }
  
          ColumnLayout {
              id: columnLayout
              x: 139
              y: -158
              anchors.fill: parent
  
              TextField {
                  id: username
                  Layout.fillWidth: true
                  placeholderText: qsTr("Username")
              }
  
              TextField {
                  id: password
                  Layout.fillWidth: true
                  placeholderText: qsTr("Password")
              }
  
              Button {
                  id: login
                  text: qsTr("Login")
                  spacing: -2
                  font.capitalization: Font.MixedCase
                  Layout.fillWidth: true
                  highlighted: false
  //                background: Rectangle {
  //                            implicitWidth: 100
  //                            implicitHeight: 40
  //                            color: button.down ? "#d6d6d6" : "#f6f6f6"
  //                            border.color: "#26282a"
  //                            border.width: 1
  //                            radius: 4
  
  //                        }
  
              }
          }
      }
  }
  </code></pre>
  
  <p>As you can see (in the commented code) I tried to add colour using <code>Rectangle</code> with the <code>background</code> property but this removes the button features like shadow, <code>highlight</code>, darken on click and so on. Is there a simple way to accomplish this?</p>
  
  <p>For reference here is the output of my code:</p>
  
  <p><a href="https://i.stack.imgur.com/ACXaB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ACXaB.png" alt="enter image description here"></a></p>