You can use the Border Image type to display an image, such as a PNG file, as a border and a background.

Use two border images and suitable graphics to make it look like the button is pushed down when it is clicked. One of the border images is visible by default. You can specify that it is hidden and the other one becomes visible when the mouse is clicked.

Add a Mouse Area type that covers the whole area and emits the clicked signal (item.clicked()) when it detects a mouse click.

You can add text to the button and set it up as a property. The text can then be initialized from the outside, making the button a reusable UI component. The font size is also available in case the default size is too big. You can scale down the button text and use smooth text rendering for some extra quality.

To create a graphical button:

1. Select File > New File or Project > Qt > QML File (Qt Quick 2) > Choose to create a QML file called Button.qml (for example).

   Note: Types are listed in the Library only if the filename begins with a capital letter.

2. Click Design to edit the file in the visual editor.
3. In the Navigator, select Item and set the width (W) and height (H) of the button in the Properties pane.
4. Select Connections > Properties > Add to add properties for the item:

   

   1. Double-click in the columns in the view to specify a text property with the type string and an empty value.
   2. Specify another property, fontSize, with the type int and the value 10.
5. Drag and drop two Border Image types from the Library to the item in the Navigator.
6. Drag and drop a Text type to the item in the navigator.
7. Drag and drop a Mouse Area to the item in the navigator.
8. In the navigator, select a border image to specify settings for it in the Properties pane:
   1. Select Connections > Bindings > Add to hide the image when the mouse button is not pressed down. Specify the visible property with the !mouseArea source item and pressed source property.

      

   2. In the Source field, select the image file for the button, for example button_up.png.
   3. Click Layout, and then click the (Fill to Parent) button to anchor the border image to the Item.
9. Select the other border image to specify similar settings for it:
   1. In Bindings, specify the visible property with the mouseArea source item and pressed source property to show the image when the mouse button is pressed down.
   2. In the Source field, select the image file for the button when it is clicked, for example button_down.png.
   3. Select Layout > Fill to Parent button to anchor the border image to the Item.
10. Select the text to specify font size and color, and text scaling and rendering:
    1. In the Color field, use the color picker to select the font color, or enter a value in the field.
    2. In Bindings, create bindings to properties:

       

       • Set the source property of the text property as text and the source item as parent.
       • Set the source property of the font.pixelSize as fontSize and the source item as parent.
       • Set the source property of scale as if (!mouseArea and the source item as pressed) { 1 } else { 0.95 }.
    3. Click Layout, and then click the (Set Vertical Anchor) and (Set Horizontal Anchor) buttons to inherit the vertical and horizontal centering from the parent.
11. Select mouseArea in the navigator and then select Connections > Add to set item.clicked() as the value of the onClicked signal handler.

    

12. In the code editor, specify the clicked signal for the Item:

    Item {
        id: item
        property string text: ""
        property int fontSize: 10
    
        signal clicked
    }

Note: To test the button, add it to a Qt Quick Application or Qt Quick UI project and run the application.