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. Change QPushButton opacity on hover and pressed states.
Qt 6.11 is out! See what's new in the release blog

Change QPushButton opacity on hover and pressed states.

Scheduled Pinned Locked Moved Solved General and Desktop
8 Posts 4 Posters 7.5k Views 1 Watching
  • 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.
  • L Offline
    L Offline
    l000p
    wrote on last edited by
    #1

    Well the title it's self explanatory. I am trying to achieve those results for buttons that are not created with the designer. They are generated via code.
    That behavior is most likely achievable true QSS - therefor how to set the style sheet most efficiently.
    What I am thinking of is setStyleSheet(blablalba) in the constructor - is there any way better than that?
    Can someone better than me with QSS (obviously) help me with the syntax ?
    Cheers.

    1 Reply Last reply
    0
    • gde23G Offline
      gde23G Offline
      gde23
      wrote on last edited by
      #2

      as you suggested using setStyleSheet(blablalba) in the constructor is totally fine

      L 1 Reply Last reply
      1
      • gde23G gde23

        as you suggested using setStyleSheet(blablalba) in the constructor is totally fine

        L Offline
        L Offline
        l000p
        wrote on last edited by
        #3

        @gde23 Any help with the states syntax ?

        1 Reply Last reply
        0
        • gde23G Offline
          gde23G Offline
          gde23
          wrote on last edited by
          #4

          e.g.

          QPushButton:
          { 
              background: rgba(255, 0, 125, 125);
          }
          QPushButton:hover 
          {
              background: rgba(0, 0, 0, 125);
          }
          

          or in general take a look at the examples:
          https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-a-qpushbutton-using-the-box-model

          L 1 Reply Last reply
          1
          • gde23G gde23

            e.g.

            QPushButton:
            { 
                background: rgba(255, 0, 125, 125);
            }
            QPushButton:hover 
            {
                background: rgba(0, 0, 0, 125);
            }
            

            or in general take a look at the examples:
            https://doc.qt.io/qt-5/stylesheet-examples.html#customizing-a-qpushbutton-using-the-box-model

            L Offline
            L Offline
            l000p
            wrote on last edited by
            #5

            @gde23 Thank you!
            Your comment led me to results. Thank you !

            QPushButton
            {
            
            	background-color: rgba(0, 172, 252, 30);
            
            	border:0px solid rgb(0,175,252);
            	border-style: outset;
            	border-width: 1px;
            	margin-bottom: 1px;
            }
            QPushButton:hover
            {
            	background-color: rgba(0, 172, 252, 50);
            }
            
            QPushButton:pressed
            {  
            	background-color: rgba(0, 120, 252, 150);
                border-style: inset;
                border-width: 2px;
            
            }
            
            

            During the process I've learned that you can also set border-image for each state of the button. So any rater complex design can be achieved true Photoshop as QSS supports .png with alpha.

            One more thing I am concerned right now and it's if I am able to support custom button shapes let's say I'll want my button to appear as an image of a house, but only be able to click inside the image area.
            Like here - Image

            KaguroK 1 Reply Last reply
            0
            • L l000p

              @gde23 Thank you!
              Your comment led me to results. Thank you !

              QPushButton
              {
              
              	background-color: rgba(0, 172, 252, 30);
              
              	border:0px solid rgb(0,175,252);
              	border-style: outset;
              	border-width: 1px;
              	margin-bottom: 1px;
              }
              QPushButton:hover
              {
              	background-color: rgba(0, 172, 252, 50);
              }
              
              QPushButton:pressed
              {  
              	background-color: rgba(0, 120, 252, 150);
                  border-style: inset;
                  border-width: 2px;
              
              }
              
              

              During the process I've learned that you can also set border-image for each state of the button. So any rater complex design can be achieved true Photoshop as QSS supports .png with alpha.

              One more thing I am concerned right now and it's if I am able to support custom button shapes let's say I'll want my button to appear as an image of a house, but only be able to click inside the image area.
              Like here - Image

              KaguroK Offline
              KaguroK Offline
              Kaguro
              wrote on last edited by
              #6

              @l000p Hi Guys! We have a solution about this question? This relevant for me now :)

              Pl45m4P 1 Reply Last reply
              0
              • KaguroK Kaguro

                @l000p Hi Guys! We have a solution about this question? This relevant for me now :)

                Pl45m4P Offline
                Pl45m4P Offline
                Pl45m4
                wrote on last edited by
                #7

                @Kaguro

                Solution to what problem exactly? The opacity? The hover?


                If debugging is the process of removing software bugs, then programming must be the process of putting them in.

                ~E. W. Dijkstra

                KaguroK 1 Reply Last reply
                0
                • Pl45m4P Pl45m4

                  @Kaguro

                  Solution to what problem exactly? The opacity? The hover?

                  KaguroK Offline
                  KaguroK Offline
                  Kaguro
                  wrote on last edited by
                  #8

                  @Pl45m4
                  Yes the hover! I would like to only activate the button events when the cursor above the picture. So i would like the borders of the button becomes the png picture border! Thanks for your help!

                  1 Reply Last reply
                  0

                  • Login

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