Qt Stylesheets Button Bar Tutorial

To demonstrate the awesomeness of Qt’s stylesheets, we’ll make a modern looking button bar (inspired by Qt Creator) that looks like this:

Let’s get started

Step 1 Open Designer and create a new empty widget:

Step 2 Toss a couple QFrames on the widget, one above the other. Name them topFrame and bottomFrame, like this:

Step 3 Apply a vertical layout to your widget (just click on the background area and then click the vertical layout button in Designer’s toolbar. It should look like this now:

Step 4 Drag and drop a few buttons and a horizontal spacer onto the frame you called “topFrame” (don’t forget to name it if you haven’t already)

Step 5 Apply a horizontal layout to the “topFrame”

Step 6 Set the vertical size policy for the “topFrame” to “Fixed”. This makes it shrink to a minimum size and lets the bottom frame grow to fill the rest of the widget.

Step 7 Set your margins and spacings to 0 (do this by clicking on the background and at the bottom of Property editor you’ll find the “Layout” section which lets you specify this stuff).

Step 8 Add a style sheet to your widget (right click on the top-most entry in the Object Inspector and select “Change styleSheet…”). Put this style in there for now:

#topFrame {
border: none;
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #a6a6a6, stop: 0.08 #7f7f7f,
stop: 0.39999 #717171, stop: 0.4 #626262,
stop: 0.9 #4c4c4c, stop: 1 #333333);
}

#bottomFrame {
border: none;
background: white;
}

That will give the topFrame a nice modern background that looks like this:

Step 9 Now stylize the buttons. Add this to your stylesheet:

#topFrame QPushButton {
color: #333;
border: 2px solid #555;
border-radius: 11px;
padding: 5px;
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #888);
min-width: 80px;
}

#topFrame QPushButton:hover {
background: qradialgradient(cx: 0.3, cy: -0.4,
fx: 0.3, fy: -0.4,
radius: 1.35, stop: 0 #fff, stop: 1 #bbb);
}

#topFrame QPushButton:pressed {
background: qradialgradient(cx: 0.4, cy: -0.1,
fx: 0.4, fy: -0.1,
radius: 1.35, stop: 0 #fff, stop: 1 #ddd);
}

That style sheet makes the buttons have rounded corners, a nifty radial gradient background, and modern hover and click effects, like this:

Now press Ctrl+R and view the finished product:

Aren’t Qt stylesheets awesome?

14 comments to “Qt Stylesheets Button Bar Tutorial”

You can leave a reply or Trackback this post.
  1. http://Ramunas says: -#1

    Thanks for cool stuff. ;)

  2. http://dragan says: -#1

    nice tutorial, tnx

  3. http://Arpit says: -#1

    Cool Stuff!! I really appreciate. I found no better source on the web.

  4. Cool stuff, I used it. Many thanks.

  5. Really cool ! Thanks a lot.

  6. http://Mitcheal%20Strak says: -#1

    Great work man…

  7. http://Girish.L.C says: -#1

    Really very interesting stuff,

    Could you please let me know how to make it round shape???

    -Thanks,
    Girish.L.C

  8. http://Girish.L.C says: -#1

    While selecting the push button even though we have trimmed the corner, we are still able to select that portion.

    Anybody know how to disable that portion.

    -Girish.L.C

  9. It simply Superb..and easy to understand…Thank u

  10. http://Adrian%20Edmonds says: -#1

    Oh nice, Nice and simple , easy to follow and encouraging. Please do more.

  11. http://Oleg says: -#1

    Thank you!

  12. http://Dídac%20Pérez says: -#1

    Good tutorial! Thanks for this, no better source in the Internet

  13. Bless your soul.

  14. tnx for your tutorial
    but i have an problem
    when i try to add an vertical layout to Qwidget it seems diffrent with the image in website…
    please help
    it’s important