custom button loses radius on hover

mzimmers

Hi all -

I'm trying to customize a button per the instructions here:

Button {
   id: control
   text: qsTr("Button")

   contentItem: Text {
       text: control.text
       font: control.font
       opacity: enabled ? 1.0 : 0.3
       color: control.down ? "#17a81a" : "#21be2b"
       horizontalAlignment: Text.AlignHCenter
       verticalAlignment: Text.AlignVCenter
       elide: Text.ElideRight
   }

   background: Rectangle {
       implicitWidth: 100
       implicitHeight: 40
       opacity: enabled ? 1 : 0.3
       border.color: control.down ? "#17a81a" : "#21be2b"
       border.width: 1
       radius: 2
   }
}

Unfortunately, I want a rounder button, so I changed radius to height / 2. Looks fine until I hover over it, then it reverts. Can anything be done about this?

Thanks...

Chris Kawa

There's a RoundButton that has a radius property.

mzimmers

Perfect...I was aware of that one, but I didn't realize it didn't have to be truly "round" (as in circular).

Thanks, Chris.

Chris Kawa

Yeah, RoundedButton would probably be a better name.