how to create a toggle button(on/off button)

ManiRon

I want to create a button when it is pressed once its color should be changed to green and again if i press the button the button should br changed to red . I mean toggle . How to do this ?

jsulm

@ManiRon You can use http://doc.qt.io/qt-5/stylesheet-syntax.html for that

ManiRon

@jsulm yes sir i am using that only but how i can detect the press of the button . I mean for the first press i want o show one color and for the next press i want to show one color and the color combination is same . for each press i want to change the color

jsulm

@ManiRon http://doc.qt.io/qt-5/qabstractbutton.html#clicked

ManiRon

@jsulm but how to use them sir, any example would be helpful

J.Hilk

@ManiRon said in how to create a toggle button(on/off button):

@jsulm yes sir i am using that

I doubt you use it to it's full potential. No need to set a new Stylesheet each time the button is pressed.

myButton->setCheckable(true);
myButton->setStyleSheet("
    QPushButton{background-color:green;}
    QPushButton:checked{background-color:red;}"
);

not checked -> Green color
checked -> Red color each click a different color

jsulm

@ManiRon Please learn how to use signals/slots: http://doc.qt.io/qt-5/signalsandslots.html

anil_arise

this example help you..

bool clicked= false;
QPushButton *Button=new QPushButton;
connect(Button,SIGNAL(clicked(),this,SLOT(on_Button_clicked());

on_Button_clicked()
{
if(!clicked)
{
Button->setStyleSheet("background-color:yellow;");

}
else
{
    Button->setStyleSheet("background-color:green;");

}

clicked=!clicked;

}

ManiRon

@anil_arise

yes sir,

But i am going to use nearly 35 buttons and every time based on the press each button the color should be changed

jsulm

@ManiRon Please read what @J-Hilk wrote...

ManiRon

@jsulm

yes sir Thanks its working

anil_arise

@ManiRon
you can use same SLOT for each and every 35 buttons..

connect(Button1,SIGNAL(clicked(),this,SLOT(on_Button_clicked());
.
.
connect(Button35,SIGNAL(clicked(),this,SLOT(on_Button_clicked());

this is better help @J-Hilk

ManiRon

@J.Hilk

Dear sir,

I used what u have specified and it worked but now my concern is the color it appears like the below image

I want is as a full red something like this

J.Hilk

@ManiRon instead of the predfined color naming convention, you can also use rgb values to customize it:

for example:

background-color:rgb(87,117,131);

ManiRon

@J.Hilk i tried it but the red color alone remains the same as i mention in the previous comment maybe its based on the checked selection i think so.

Actually I absorbed one thing . When i click the button once it changes to green but next time when i press the button it changes to how i mention in my previous comment and when i keep it pressed without releasing the color is is like the image

ManiRon

@J.Hilk

I did something like this sir

ui->pushButton_34->setCheckable(true);

if(ui->pushButton_34->isChecked())
{
    ui->pushButton_34->setStyleSheet("background-color: rgb(170, 0, 0)");
    ui->pushButton_34->setCheckable(false);
}
else
{
    ui->pushButton_34->setStyleSheet("background-color: rgb(0, 170, 0)");
}

is it a correct way . I was able to bring it out.

J.Hilk

@ManiRon
I believe, that is the focus rectangle that is overlaying the Pushbutton in a semi transparent way.
add the following to your stylesheet:

QPushButton:focus{border:none; }

QPushButton *btn = new QPushButton();

    btn->setCheckable(true);
    btn->setStyleSheet("QPushButton{background-color:red;} \
                       QPushButton:checked{background-color:green;} \
                       QPushButton:focus{border:none; }");
    btn->show();

ManiRon

@J.Hilk

that also worked sir, but i want the border and i tried some thing like this

if(ui->pushButton_34->isChecked())
{
ui->pushButton_34->setStyleSheet("background-color: rgb(170, 0, 0)");
ui->pushButton_34->setCheckable(false);
}
else
{

    ui->pushButton_34->setStyleSheet("background-color: rgb(0, 170, 0)");


}

is it a correct way ?

J.Hilk

@ManiRon please read the docu @jsulm linked. To learn more about stylsheet and it's syntax.

focus{border:none;} does not mean your Qpushbutton can't not have a custom border!

Applying a new Stylesheet each time you click the button is, in my opinion, the worst way you could implement what you want to do.

But if it works for you, and you're fine with it, who am I to judge?