Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Styling QPushButton with QSS in PySide and PyQt

Tech May 16 1

QPushButton Basics

QPushButton is one of the most fundamental widgets in Qt-based GUI applications. Users interact with these buttons to execute commands, confirm actions, or respond to prompts—common examples include OK, Apply, Cancel, Yes, No, and Help buttons.

Key Interaction States

QPushButton responds to user input by entering distinct visual states:

  • Normal: The default idle state when no interaction is occurring.
  • Hover: Triggered when the mouse cursor moves over the button’s visible area.
  • Checked: Activated only if the mouse is released within the button’s bounds; this state does not engage if the cursor is dragged outside the button before releasing.
  • Pressed: Immediate activated when the mouse button is pressed down on the button.

Styling with Qt Style Sheets (QSS)

Below are production-ready QSS styles for common button variants, covering all interaction states and disabled modes.

1. Default Button

A neutral button style suitable for standard actions:

  • Base Style
QPushButton {{
    color: #606266;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
}}
QPushButton:hover {{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}}
QPushButton:checked {{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}}
QPushButton:pressed {{
    color: #3a8ee6;
    border-color: #3a8ee6;
    background-color: #ecf5ff;
}}
  • Rounded Corner Variant Add a border-radius property to create soft edges:
QPushButton {{
    color: #606266;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}}
QPushButton:checked {{
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}}
QPushButton:pressed {{
    color: #3a8ee6;
    border-color: #3a8ee6;
    background-color: #ecf5ff;
}}
  • Disabled State A muted style for non-interactive buttons:
QPushButton {{
    color: #c0c4cc;
    background-color: #ffffff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
}}

2. Primary Button

A prominent style for main action buttons:

  • Base Style
QPushButton {{
    color: #ffffff;
    background-color: #409eff;
    border: 1px solid #409eff;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #66b1ff;
    background-color: #66b1ff;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #66b1ff;
    background-color: #66b1ff;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #3a8ee6;
    background-color: #3a8ee6;
}}
  • Rounded Corner Variant
QPushButton {{
    color: #ffffff;
    background-color: #409eff;
    border: 1px solid #409eff;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #66b1ff;
    background-color: #66b1ff;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #66b1ff;
    background-color: #66b1ff;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #3a8ee6;
    background-color: #3a8ee6;
}}
  • Disabled State
QPushButton {{
    color: #ffffff;
    background-color: #a0cfff;
    border: 1px solid #a0cfff;
    border-radius: 10px;
}}

3. Success Button

Green-themed style for confirmation or success actions:

  • Base Style
QPushButton {{
    color: #ffffff;
    background-color: #67c23a;
    border: 1px solid #67c23a;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #85ce61;
    background-color: #85ce61;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #85ce61;
    background-color: #85ce61;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #5daf34;
    background-color: #5daf34;
}}
  • Rounded Corner Variant
QPushButton {{
    color: #ffffff;
    background-color: #67c23a;
    border: 1px solid #67c23a;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #85ce61;
    background-color: #85ce61;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #85ce61;
    background-color: #85ce61;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #5daf34;
    background-color: #5daf34;
}}
  • Disabled State
QPushButton {{
    color: #ffffff;
    background-color: #b3e19d;
    border: 1px solid #b3e19d;
    border-radius: 10px;
}}

4. Info Button

Gray-themed style for informational or neutral actions:

  • Base Style
QPushButton {{
    color: #ffffff;
    background-color: #909399;
    border: 1px solid #909399;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #a6a9ad;
    background-color: #a6a9ad;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #a6a9ad;
    background-color: #a6a9ad;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #82848a;
    background-color: #82848a;
}}
  • Rounded Corner Variant
QPushButton {{
    color: #ffffff;
    background-color: #909399;
    border: 1px solid #909399;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #a6a9ad;
    background-color: #a6a9ad;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #a6a9ad;
    background-color: #a6a9ad;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #82848a;
    background-color: #82848a;
}}
  • Disabled State
QPushButton {{
    color: #ffffff;
    background-color: #c8c9cc;
    border: 1px solid #c8c9cc;
    border-radius: 10px;
}}

5. Warning Button

Orange-themed style for caution or prompt actions:

  • Base Style
QPushButton {{
    color: #ffffff;
    background-color: #e6a23c;
    border: 1px solid #e6a23c;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #ebb563;
    background-color: #ebb563;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #ebb563;
    background-color: #ebb563;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #cf9236;
    background-color: #cf9236;
}}
  • Rounded Corner Variant
QPushButton {{
    color: #ffffff;
    background-color: #e6a23c;
    border: 1px solid #e6a23c;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #ebb563;
    background-color: #ebb563;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #ebb563;
    background-color: #ebb563;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #cf9236;
    background-color: #cf9236;
}}
  • Disabled State
QPushButton {{
    color: #ffffff;
    background-color: #f3d19e;
    border: 1px solid #f3d19e;
    border-radius: 10px;
}}

6. Danger Button

Red-themed style for destructive or critical actions:

  • Base Style
QPushButton {{
    color: #ffffff;
    background-color: #f56c6c;
    border: 1px solid #f56c6c;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #f78989;
    background-color: #f78989;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #f78989;
    background-color: #f78989;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #dd6161;
    background-color: #dd6161;
}}
  • Rounded Corner Variant
QPushButton {{
    color: #ffffff;
    background-color: #f56c6c;
    border: 1px solid #f56c6c;
    border-radius: 10px;
}}
QPushButton:hover {{
    color: #ffffff;
    border-color: #f78989;
    background-color: #f78989;
}}
QPushButton:checked {{
    color: #ffffff;
    border-color: #f78989;
    background-color: #f78989;
}}
QPushButton:pressed {{
    color: #ffffff;
    border-color: #dd6161;
    background-color: #dd6161;
}}
  • Disabled State
QPushButton {{
    color: #ffffff;
    background-color: #fab6b6;
    border: 1px solid #fab6b6;
    border-radius: 10px;
}}

Generating Styles Dynamically with Python

You can use Python functions to generate reusable QSS styles, enabling dynamic customization of button colors and dimensions:

def generate_button_style(default_bg="#409eff", hover_bg="#66b1ff", 
                         checked_bg="#66b1ff", pressed_bg="#3a8ee6",
                         border_radius="10px", text_color="#ffffff"):
    return f'''QPushButton {{
    color: {text_color};
    background-color: {default_bg};
    border: 1px solid {default_bg};
    border-radius: {border_radius};
}}
QPushButton:hover {{
    color: {text_color};
    border-color: {hover_bg};
    background-color: {hover_bg};
}}
QPushButton:checked {{
    color: {text_color};
    border-color: {checked_bg};
    background-color: {checked_bg};
}}
QPushButton:pressed {{
    color: {text_color};
    border-color: {pressed_bg};
    background-color: {pressed_bg};
}}'''

# Predefined styles for common button types
DEFAULT_BUTTON_STYLE = '''
QPushButton {
    color: #606266;
    background-color: #ffffff;
    border: 1px solid #dcdfe6;
    border-radius: 10px;
}
QPushButton:hover {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
QPushButton:checked {
    color: #409eff;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
}
QPushButton:pressed {
    color: #3a8ee6;
    border-color: #3a8ee6;
    background-color: #ecf5ff;
}'''

PRIMARY_BUTTON_STYLE = generate_button_style()
SUCCESS_BUTTON_STYLE = generate_button_style(default_bg="#67c23a", hover_bg="#85ce61", checked_bg="#85ce61", pressed_bg="#5daf34")
INFO_BUTTON_STYLE = generate_button_style(default_bg="#909399", hover_bg="#a6a9ad", checked_bg="#a6a9ad", pressed_bg="#82848a")
WARNING_BUTTON_STYLE = generate_button_style(default_bg="#e6a23c", hover_bg="#ebb563", checked_bg="#ebb563", pressed_bg="#cf9236")
DANGER_BUTTON_STYLE = generate_button_style(default_bg="#f56c6c", hover_bg="#f78989", checked_bg="#f78989", pressed_bg="#dd6161")

def generate_disabled_button_style(btn_bg="#a0cfff", text_color="#ffffff", border_radius="10px"):
    return f'''QPushButton {{
    color: {text_color};
    background-color: {btn_bg};
    border: 1px solid {btn_bg};
    border-radius: {border_radius};
}}'''

# Predefined disabled styles
DISABLED_DEFAULT_STYLE = '''
QPushButton {
    color: #c0c4cc;
    background-color: #ffffff;
    border: 1px solid #ebeef5;
    border-radius: 10px;
}'''

DISABLED_PRIMARY_STYLE = generate_disabled_button_style()
DISABLED_SUCCESS_STYLE = generate_disabled_button_style(btn_bg="#b3e19d")
DISABLED_INFO_STYLE = generate_disabled_button_style(btn_bg="#c8c9cc")
DISABLED_WARNING_STYLE = generate_disabled_button_style(btn_bg="#f3d19e")
DISABLED_DANGER_STYLE = generate_disabled_button_style(btn_bg="#fab6b6")
Tags: PySidePyQt
Back to List

Prev: Binary to Gray Code Conversion in Hardware

Next: SignalR Real-Time Communication Implementation

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top