<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Disable default color on button down]]></title><description><![CDATA[<p dir="auto">Re: <a href="/topic/131442/customize-color-on-button-down-or-active">Customize color on button down or active</a></p>
<p dir="auto">I believe it is this exact same issue but there was no solution for it.</p>
<p dir="auto">I have a function that should change the color of the button if it is being hovered over or if it is pressed.</p>
<p dir="auto">However, there is a default functionality for the colors of the button that seems to be taking precedence over my function.</p>
<p dir="auto">I was able to get the hover aspect of it working by setting <code>flat: true</code> but still when I press the button I get the same button down default white background.</p>
<p dir="auto">Here is my qml file:</p>
<pre><code>import QtQuick 2.15
import QtQuick.Controls 2.15

Button {
    id: btnToggle

    // CUSTOM PROPERTIES
    property url btnIconSource: "../../images/png_images/icons8-menu-rounded-90(-xxhdpi).png"
    property color btnColorDefault: "#1c1d20"
    property color btnColorMouseOver: "#23272e"
    property color btnColorClicked: "#00a1f1"

    QtObject {
        id: internal

        // MOUSE OVER AND CLICK CHANGE COLOR
        property var dynamicColor: if(btnToggle.down){
                                       btnToggle.down ? btnColorClicked : btnColorDefault
                                   } else {
                                       btnToggle.hovered ? btnColorMouseOver : btnColorDefault
                                   }
    }

    flat: true
    implicitWidth: 70
    implicitHeight: 60

    background: Rectangle {
        id: bgBtn
        color: internal.dynamicColor

        Image {
            id: iconBtn
            source: btnIconSource
            smooth: false
            layer.format: ShaderEffectSource.RGBA
            antialiasing: false
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            height: 25
            opacity: 1
            visible: true
            width: 25
            fillMode: Image.PreserveAspectFit
        }
    }
}
</code></pre>
<p dir="auto">EDIT: I noticed that i can see the color I chose for button down actually behind the white background (the blue color sticking out of the corners). So my function seems to be working but there is a color being displayed over it. See below:</p>
<p dir="auto"><img src="https://ddgobkiprc33d.cloudfront.net/ae3ae8fe-c2b2-4cb5-bc5b-71eedf41c948.png" alt="4d214480-ad7e-49bb-a7f4-218e11d5fec3-image.png" class=" img-fluid img-markdown" /></p>
]]></description><link>https://forum.qt.io/topic/139352/disable-default-color-on-button-down</link><generator>RSS for Node</generator><lastBuildDate>Fri, 08 May 2026 02:15:34 GMT</lastBuildDate><atom:link href="https://forum.qt.io/topic/139352.rss" rel="self" type="application/rss+xml"/><pubDate>Fri, 16 Sep 2022 04:53:09 GMT</pubDate><ttl>60</ttl></channel></rss>