CODEWITHSUNDEEP
qtqtstylesheetsqpushbutton
Narcisse Doudieu Siewe
Narcisse Doudieu Siewe

Reputation: 307

QPushButton with a custom shape

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

Upvotes: 2

Views: 12113

Answers (1)

warunanc
warunanc

Reputation: 2261

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.

Upvotes: 3

Related Questions