Buttons in Style

Stylesheets and icons brighten up the appearance of your QT program. The basic idea is simple. It is commonly known that HTML pages are easy to create in style. QT stylesheets are very alike.

You can embed a style description into your application source code in the following way. Here your button, "pushButton", is set to show gradient colors and rounded corners. Also the the appearance of what the button should look like, when it is pushend down, is specified.

ui->pushButton->setStyleSheet("QPushButton {\
color: black;\
background-color: Qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #f6f7aa, stop: 1 #dadbff);\
border-width: 2px;\
border-color: black;\
border-style: solid;\
border-radius: 9;\
padding: 3px;\
font-size: 30px;\
padding-left: 5px;\
padding-right: 5px;\
min-width: 250px;\
max-width: 250px;\
min-height: 153px;\
max-height: 153px;\
} \
QPushButton:pressed {\
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #dadbff, stop: 1 #f6f7aa);\
}\
");


More details can be found here: http://doc.trolltech.com/4.7/stylesheet.html.

Icons can be added to your buttons nearly as easily. Only some lines of source code is needed.

You don't need to create all the icons yourself. Free icons can be found at: http://www.openclipart.org/tags/icon.

When you have found a nice image, it is a good idea to resize it to fit the page properly. You can use Microsoft Windows Paint to adjust the size in pixels. For example a 80x80 image is quite suitable.

Create "images" subdirectory under your application project. Copy your new icon file to that directory and name it "button.png".

Add the following lines to the your_application.pro file of your application project:

RESOURCES += \
icons.qrc

OTHER_FILES += \
images/button.png



Create a text file icons.qrc to your project home folder. (Make sure that the file extension is .qrc). Add the followin lines to that file:

<RCC>
<qresource prefix="/">
<file>images/button.png</file>
</qresource>
</RCC>


Now, the following piece of code can be used to add an icon to your button at your C++ source code:

ui->pushButton_2->setText("");
ui->pushButton_2->setStyleSheet("QPushButton{ min-width: 80px;\
max-width: 80px;\
min-height: 80px;\
max-height: 80px;\
background-color: white;\
background-attachment: scroll;\
background-image: url(:/images/button.png);}");