Button with wider clickable area

MichaelRink

Does the QML Button allow the clickable area to be wider than the visible background image? Something like this?

I feel like I should be able to write something along the lines of:

Button{
height: 100
width: 100
topMargin: 20
bottomMargin: 20
leftMargin: 20
rightMargin: 20

Text: "Button Label"
Text.horizontalAlignment: Text.AlignHCenter
Text.color: "white"

color: Green
colorPressed: Orange
radius: 4
}

to get a pressable square that is 100x100 pixels with a visible green button in the center 60x60 pixels that turns orange when pressed. But I can't seem to find the right syntax.

Vinod Kuntoji

@MichaelRink ,

Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Rectangle{
id:outerrect
anchors.centerIn: parent
width: 400
height: 200
border.color: "black"
color: "white"
Rectangle{
id:rect
anchors.centerIn: outerrect
color: "green"
width: 200
height: 100
radius: 10
Text {
id: name
anchors.centerIn: rect
text: qsTr("Visible Area")
color: "white"
font.pixelSize: 24
}
}
MouseArea {
anchors.fill: parent
onClicked: {
console.log(qsTr('Clicked on outer rect..'))
}
}
}
}