app/resources/qml/components/FancyButton.qml

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtGraphicalEffects 1.0

import de.itsblue.ScStw.Styling 2.0
import de.itsblue.ScStw.Styling.Components 1.0

Button {
    id: control

    property string image
    property color backgroundColor: appTheme.theme.colors.button
    property real imageScale: 1
    property double glowRadius: 0.001
    property double glowSpread: 0.2
    property bool glowVisible: true
    property double glowScale: 0.75
    property double glowOpacity: Math.pow( control.opacity, 100 )

    Behavior on text {
        //animate a text change
        enabled: true
        FadeAnimation {
            target: text
        }
    }

    contentItem: Item {}

    background: Item {
        id: controlBackgroundContainer

        RectangularGlow {
            id: effect
            glowRadius: control.glowRadius
            spread: control.glowSpread
            color: "black"

            visible: control.glowVisible

            cornerRadius: controlBackground.radius
            anchors.fill: controlBackground
            scale: control.glowScale
            opacity: control.glowOpacity
        }

        Rectangle {
            id:  controlBackground

            anchors.fill: parent

            radius: height * 0.5

            color: control.down ? Qt.darker(control.backgroundColor, 1.2) : control.backgroundColor

            Behavior on color {
                ColorAnimation {
                    duration: 200
                }
            }

            Text {
                id: text

                anchors.centerIn: parent
                anchors.verticalCenterOffset: -height * 0.05
                height: parent.height * 0.6
                width: parent.width * 0.6

                fontSizeMode: Text.Fit
                font.pixelSize: Math.max(parent.height * 0.16, parent.width * 0.16)
                font.family: "Helvetica"

                verticalAlignment: Text.AlignVCenter
                horizontalAlignment: Text.AlignHCenter

                text: control.text

                color: enabled ? appTheme.theme.colors.text:appTheme.theme.colors.disabledText
            }

            Image {
                id: buttonIcon
                source: control.image

                anchors.centerIn: parent
                height: parent.height * 0.5
                width: height

                mipmap: true

                fillMode: Image.PreserveAspectFit

                scale: control.imageScale
            }
        }
    }

}