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.
Forum Updated to NodeBB v4.3 + New Features

Change QPushButton opacity on hover and pressed states.

Scheduled Pinned Locked Moved Solved General and Desktop
8 Posts 4 Posters 5.6k 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