Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to display circle around button on focus
Forum Updated to NodeBB v4.3 + New Features

How to display circle around button on focus

Scheduled Pinned Locked Moved Unsolved General and Desktop
2 Posts 2 Posters 595 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • A Offline
    A Offline
    alekseyr
    wrote on last edited by alekseyr
    #1

    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

    M 1 Reply Last reply
    0
    • A alekseyr

      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

      M Offline
      M Offline
      Mammamia
      wrote on last edited by
      #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

      1 Reply Last reply
      2

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved