QPushButton with a custom shape

qt qtstylesheets qpushbutton
Narcisse Doudieu Siewe picture Narcisse Doudieu Siewe · Nov 19, 2012 · Viewed 11.1k times · Source

I want to make some buttons look like buttons you see in Skype. How to style a QPushButton with a custom shape? I don't have any idea for doing this. So I need some suggestions. For example, I want my QPushButton to look like this image

Answer

warunanc picture warunanc · Nov 19, 2012

You can use QT-Stylesheets to style a QPushButton whatever the way you like it to be. You can style the border-image property of the QPushButton, there is an example here explains just that. Go through documentation. Specially study css box-modal.

But your requirement can be fulfilled simply by setting following style sheet to your QPushButton. You have to prepare PNG images using an image editing software like GIMP, so the image will have a transparent background.

QPushButton#myPushButton
{
    background-color: transparent;
    background-image: url(":/transparent_image.png");
    background-repeat: none;    
    border: none;
}

Furthermore, you might want to style :hover and :pressed pseudo states as well by setting two additional images, so it will look more like a button in terms of its behavior.

QPushButton#myPushButton:hover
{
   background-image: url(":/transparent_image_hover.png");
}

QPushButton#myPushButton:pressed
{
   background-image: url(":/transparent_image_pressed.png");
}

I have virtually spoon-fed the answer for you, so keep in mind that it is necessary to be specific when looking for an answer. So people can help you with more focused answers.

Related questions

How to set QPushButton stylesheet affecting buttons size?

When I QApplication::setStyleSheet() with the following stylesheet QPushButton { border-radius: 2px; padding: 0.2em 0.2em 0.3em 0.2em; border: 1px solid rgb(100, 100, 100); background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #f4f4f4, stop:0.1 #8F8F8F, stop:1 #7B7B7B); color: white; } …

Read More
How to override just one property:value pair in Qt StyleSheet

I am writing newbie Qt5 code on OSX Mavericks and would like to override just one property:value pair of the StyleSheet for a given widget. If I run the following self-contained demonstration code: #include <QApplication> #include <…

Read More
How to change QPushButton text and background color

I am using following code to connect QMenu to QPushButton. When button is clicked a pull-down menu with multiple sub-menu's items is shown. button=QPushButton() button.setText("Press Me") font=QtGui.QFont() button.setFont(font) button.setSizePolicy(ToolButtonSizePolicy) button.setPopupMode(…

Read More