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"
}
}
}
