Customize color on button down or active

jfrumk

Hi there! I'm new to QML and I've been trying to customize the properties of the default control button. I've seen that you can change the color of the button when it's pressed down from this sort of code:

Button {
    id: button
    text: "A Special Button"
    background: Rectangle {
        implicitWidth: 100
        implicitHeight: 40
        color: button.down ? "#d6d6d6" : "#f6f6f6"
        border.color: "#26282a"
        border.width: 1
        radius: 4
    }
}

this is from the official documentation. However, every time I try to do this my buttons still have this light blue ish background when clicked.
to test I have a button using that rectangle trick. the border is "blue" the background is "green" when not clicked and "red" when it is clicked or down.
Not clicked:

clicked:

as you can see it's not red. It still seems to be the default click color. Any help would be greatly appreciated!!!

Markkyboy

Where are the 'clicked' and 'not clicked' images coming from?, your post makes little sense, please take a moment to refine your question and paste the code you are actually using. I ask, as the code you've pasted yields results far removed from the weird little images you've posted (re: not clicked & clicked)

jfrumk

Hi! thank you for taking time to reply. I'm sorry for being confusing!
so for example if I run this exact code:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Button{
        id:button
        icon.source: "qrc:/toggle_icon.svg"
        icon.color:"white"
        flat:true
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "red" : "green"
            border.color: "blue"
            border.width: 1
        }
    }
}

I have an image called toggle icon thats just three lines.
something like this:
(https://ddgobkiprc33d.cloudfront.net/295be8a7-33aa-4c0a-87fd-11854fa4b4d7.png)
thats where the image is coming from. So I'm not sure if its just me but with this code the button appears to be green but when I click on it it doesn't turn red it turns light blue.

flowery

@jfrumk said in Customize color on button down or active:

#f6f6f6"

This Code is working perfect . When you are using hex color codes .Make sure you are using the correct ones.

color: button.down ? "#d6d6d6" : "#f6f6f6". These codes are not for red and green.

jfrumk

I understand the original code isnt for red green and blue. I was just using red blue and green in my code because its clear to see if the changes are working or not. When I try with hex values it still doesn't work for me.
my Qt version is 6.2.1 I'm not sure if thats the reason why.
Like for example if I take the exact code from the first post I made and replace both hex values with complete black so:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    Button {
        id: button
        text: "A Special Button"
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 40
            color: button.down ? "#000000" : "#000000"
            border.color: "#26282a"
            border.width: 1
            radius: 4
        }
    }
}

the color of the button is black as expected. When pressed, however, shouldn't the color be black still?
when it's hovered over the button changes color to the default controls "hover" color and when it is pressed it is the default controls "pressed" color.

so not pressed:

hovered:

clicked:

Is the same for everyone else? should I be changing something else to get what I want? When I change the button to "flat" it removes that hover effect but the button is still given the default "pressed" color when clicked and not the color I set for the background on click.

allcach

@jfrumk did u find the solution?