Unsolved 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;"
"}" -
@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