Flat style Qml button || QT / QML Flat Style Buttons || Custom QT/QML Button

Adesh singh..
December 12, 2022
Only Qt Version 5.15.xx Support QtGraphicalEffects
  
 

 

MyButton.qml

  

import QtQuick 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

Button {
    id: root
    property color backgroundDefaultColor: "#4E5BF2"
    property color backgroundPressedColor: Qt.darker(backgroundDefaultColor, 1.2)
    property color contentItemTextColor: "white"

    text: "Button"
    contentItem: Text {
        text: root.text
        color: root.contentItemTextColor
        font.pixelSize: 15
        font.family: "Arial"
        font.weight: Font.Thin
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        elide: Text.ElideRight
    }

    background: Rectangle {
        implicitWidth: 83
        implicitHeight: 37
        color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor
        radius: 3
        layer.enabled: true
        layer.effect: DropShadow {
            transparentBorder: true
            color: root.down ? root.backgroundPressedColor : root.backgroundDefaultColor
            samples: 20
        }
    }
}




main.qml


import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Layouts 1.3
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    GridLayout {
        anchors.centerIn: parent
        rows: 3
        columns: 3
        rowSpacing: 30
        columnSpacing: 30

        DashButton {
            text: "First"
            backgroundDefaultColor: "#727CF5"
        }

        DashButton {
            text: "Secondary"
            backgroundDefaultColor: "#5A6268"
        }

        DashButton {
            text: "Success"
            backgroundDefaultColor: "#0ACF97"
        }

        DashButton {
            text: "Danger"
            backgroundDefaultColor: "#F9375E"
        }

        DashButton {
            text: "Warning"
            contentItemTextColor: "#313A46"
            backgroundDefaultColor: "#FFBC00"
        }

        DashButton {
            text: "Info"
            backgroundDefaultColor: "#2B99B9"
        }

        DashButton {
            text: "Light"
            contentItemTextColor: "#313A46"
            backgroundDefaultColor: "#EEF2F7"
        }

        DashButton {
            backgroundDefaultColor: "#212730"
            backgroundPressedColor: "#313A46"
        }

        DashButton {
            backgroundDefaultColor: "#3498DB"
        }
    }

}