Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

How to display circle around button on focus



  • Given stylesheet for a button:

    top: 960px;
    left: 944px;
    width: 40px;
    height: 40px;
    background: transparent url('img/play_circle_filled-24px-2.png') 0% 0% no-repeat padding-box;
    opacity: 1;

    and stylesheet for a circle around it:
    top: 944px;
    left: 928px;
    width: 72px;
    height: 72px;
    background: #EEEEEE 0% 0% no-repeat padding-box;
    opacity: 0.2;

    how to make the circle visible on focus only? Is it possible inside one stylesheet (QAbstractButton{) or it'll need to use some QLabel for this task?
    I'm totally incompetent in css, so I'm here to ask you.

    P.S The following stylesheet makes almost what I want except it doesn't draw circle but square.

    "QAbstractButton {"
    "top: 960px;"
    "left: 944px;"
    "width: 40px;"
    "height: 40px;"
    "border-image: url('img/play_circle_filled-24px-2.png') 0% 0% no-repeat padding-box;"
    "opacity: 1;"
    "}"

    "QAbstractButton:focus {"
    "border-radius: 72px;"
    "background-color: blue ;"
    "opacity: 0.2;"
    "}"

    play_circle_filled-24px-2.png



  • @alekseyr here is a sample Stylesheet for Button which shows color on focus using QPushButton:focus

    QPushButton
    {
        color: #b1b1b1;
        background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
        border-width: 1px;
        border-color: #1e1e1e;
        border-style: solid;
        border-radius: 6;
        padding: 3px;
        font-size: 12px;
        padding-left: 5px;
        padding-right: 5px;
    }
    QPushButton:pressed
    {
        background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
    }
    QPushButton:hover
    {
        border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
    }
    QPushButton:focus
    {
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
    }
    

    above stylesheet is extracted from here http://www.yasinuludag.com/darkorange.stylesheet

    I hope this will give you a hint to show the circle on focus


Log in to reply