QPushButton Animation Hoverables



  • Hello everyone !
    I want custom my QPushButton on my software.
    I want use this 'design' : http://www.w3schools.com/css/tryit.asp?filename=trycss_buttons_hover
    But I dont know how to.
    I think it's with QAnimation and custom class for QPushButton widget for 'hover' function.
    Can you help me ?
    Thank !

    John


  • Moderators

    @John_38

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent ) : QPushButton( parent )
          {
               m_Animation = QPropertyAnimation(this, "BackgroundColor");
               m_Animation.setDuration( 1000 );
               m_Animation.setEasingCurve( QEasingCurve::OutQuad );
          }
     
     ....
     
    
           QColor backgroundColor() const {
                QPalette pal = this->palette();
                return pal.color( QPalette::Button );  //may also be QPalette::Base or QPalette::Window
           }
           
           void setBackgroundColor( const QColor & color )
           {
               QPalette pal = this->palette();
                   pal.setColor( QPalette::Button )
               this->setPalette( pal );
               this->update();
           }
    
    protected:
           virtual void enterEvent(QEvent * event)
           {
                QPushButton::enterEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::red );
                m_Animation.start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::transparent );
                m_Animation.start();
           }
    
           QPropertyAnimation     m_Animation;
    };
    

    i haven't tested it, just written it down straight from my head, so excuse me if it isn't working immediately. But it should give you an idea.



  • @raven-worx said in QPushButton Animation Hoverables:

    @John_38

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent ) : QPushButton( parent )
          {
               m_Animation = QPropertyAnimation(this, "BackgroundColor");
               m_Animation.setDuration( 1000 );
               m_Animation.setEasingCurve( QEasingCurve::OutQuad );
          }
     
     ....
     
    
           QColor backgroundColor() const {
                QPalette pal = this->palette();
                return pal.color( QPalette::Button );  //may also be QPalette::Base or QPalette::Window
           }
           
           void setBackgroundColor( const QColor & color )
           {
               QPalette pal = this->palette();
                   pal.setColor( QPalette::Button )
               this->setPalette( pal );
               this->update();
           }
    
    protected:
           virtual void enterEvent(QEvent * event)
           {
                QPushButton::enterEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::red );
                m_Animation.start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::transparent );
                m_Animation.start();
           }
    
           QPropertyAnimation     m_Animation;
    };
    

    i haven't tested it, just written it down straight from my head, so excuse me if it isn't working immediately. But it should give you an idea.

    Thanks for your feedback !!
    I go test now ! :)



  • @John_38 said in QPushButton Animation Hoverables:

    @raven-worx said in QPushButton Animation Hoverables:

    @John_38

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent ) : QPushButton( parent )
          {
               m_Animation = QPropertyAnimation(this, "BackgroundColor");
               m_Animation.setDuration( 1000 );
               m_Animation.setEasingCurve( QEasingCurve::OutQuad );
          }
     
     ....
     
    
           QColor backgroundColor() const {
                QPalette pal = this->palette();
                return pal.color( QPalette::Button );  //may also be QPalette::Base or QPalette::Window
           }
           
           void setBackgroundColor( const QColor & color )
           {
               QPalette pal = this->palette();
                   pal.setColor( QPalette::Button )
               this->setPalette( pal );
               this->update();
           }
    
    protected:
           virtual void enterEvent(QEvent * event)
           {
                QPushButton::enterEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::red );
                m_Animation.start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::transparent );
                m_Animation.start();
           }
    
           QPropertyAnimation     m_Animation;
    };
    

    i haven't tested it, just written it down straight from my head, so excuse me if it isn't working immediately. But it should give you an idea.

    Thanks for your feedback !!
    I go test now ! :)

    @raven-worx said in QPushButton Animation Hoverables:

    @John_38

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent ) : QPushButton( parent )
          {
               m_Animation = QPropertyAnimation(this, "BackgroundColor");
               m_Animation.setDuration( 1000 );
               m_Animation.setEasingCurve( QEasingCurve::OutQuad );
          }
     
     ....
     
    
           QColor backgroundColor() const {
                QPalette pal = this->palette();
                return pal.color( QPalette::Button );  //may also be QPalette::Base or QPalette::Window
           }
           
           void setBackgroundColor( const QColor & color )
           {
               QPalette pal = this->palette();
                   pal.setColor( QPalette::Button )
               this->setPalette( pal );
               this->update();
           }
    
    protected:
           virtual void enterEvent(QEvent * event)
           {
                QPushButton::enterEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::red );
                m_Animation.start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
                
                if( m_Animation.state() == QAbstractAnimation::Running )
                    m_Aniamtion.stop();
                    
                m_Animation.setEndValue( Qt::transparent );
                m_Animation.start();
           }
    
           QPropertyAnimation     m_Animation;
    };
    

    i haven't tested it, just written it down straight from my head, so excuse me if it isn't working immediately. But it should give you an idea.

    First line I have an error.
    You know why ?
    http://prntscr.com/ca8wmk


  • Moderators

    @John_38
    the error message says it pretty clearly: you are missing the property's getter and setter methods.
    You need to copy the whole code i've posted.



  • @raven-worx said in QPushButton Animation Hoverables:

    @John_38
    the error message says it pretty clearly: you are missing the property's getter and setter methods.
    You need to copy the whole code i've posted.

    Now i have renamed my class on : MyPushButton and paste all your code.
    Screenshot: http://prntscr.com/ca8zfc



  • Now I have only 7 errors.
    Screenshot: http://prntscr.com/ca9686
    Can you help me ?
    Thank !

    John


  • Moderators

    @John_38
    ok...various stuff didn't work out as i though. Here is the working (tested) code:

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent = 0 ) : QPushButton( parent )
          {
              this->setText("Text");
    
               m_Animation = new QPropertyAnimation(this, "BackgroundColor", this);
               m_Animation->setDuration( 500 );
               m_Animation->setEasingCurve( QEasingCurve::OutQuad );
    
               m_BackgroundColor = Qt::transparent;
               this->setBackgroundColor( Qt::white ); //initial color
          }
    
           QColor backgroundColor() const
           {
                return m_BackgroundColor;
           }
    
           void setBackgroundColor( const QColor & color )
           {
               if( m_BackgroundColor != color )
               {
                   m_BackgroundColor = color;
                  this->setStyleSheet( QString("MyPushButton { border: 1px solid black; background-color: %1; }").arg(color.name()) );
                }
           }
    
    protected:
           virtual void enterEvent( QEvent * event )
           {
                QPushButton::enterEvent(event);
    
                if( m_Animation->state() == QAbstractAnimation::Running )
                    m_Animation->stop();
    
                m_Animation->setEndValue( QColor(Qt::red) );
                m_Animation->start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
    
                QVariant currentColor = m_Animation->currentValue();
    
                if( m_Animation->state() == QAbstractAnimation::Running )
                    m_Animation->stop();
    
                m_Animation->setEndValue( QColor(Qt::white) );
                m_Animation->start();
           }
    
           QPropertyAnimation*     m_Animation;
           QColor                   m_BackgroundColor;
    };
    


  • @raven-worx said in QPushButton Animation Hoverables:

    @John_38
    ok...various stuff didn't work out as i though. Here is the working (tested) code:

    class MyPushButton : public QPushButton
    {
           Q_OBJECT
           Q_PROPERTY( QColor   BackgroundColor    READ backgroundColor  WRITE setBackgroundColor DESIGNABLE true )
    
    public:
          MyPushButton( QWidget* parent = 0 ) : QPushButton( parent )
          {
              this->setText("Text");
    
               m_Animation = new QPropertyAnimation(this, "BackgroundColor", this);
               m_Animation->setDuration( 500 );
               m_Animation->setEasingCurve( QEasingCurve::OutQuad );
    
               m_BackgroundColor = Qt::transparent;
               this->setBackgroundColor( Qt::white ); //initial color
          }
    
           QColor backgroundColor() const
           {
                return m_BackgroundColor;
           }
    
           void setBackgroundColor( const QColor & color )
           {
               if( m_BackgroundColor != color )
               {
                   m_BackgroundColor = color;
                  this->setStyleSheet( QString("MyPushButton { border: 1px solid black; background-color: %1; }").arg(color.name()) );
                }
           }
    
    protected:
           virtual void enterEvent( QEvent * event )
           {
                QPushButton::enterEvent(event);
    
                if( m_Animation->state() == QAbstractAnimation::Running )
                    m_Animation->stop();
    
                m_Animation->setEndValue( QColor(Qt::red) );
                m_Animation->start();
           }
    
           virtual void leaveEvent( QEvent* event )
           {
                QPushButton::leaveEvent(event);
    
                QVariant currentColor = m_Animation->currentValue();
    
                if( m_Animation->state() == QAbstractAnimation::Running )
                    m_Animation->stop();
    
                m_Animation->setEndValue( QColor(Qt::white) );
                m_Animation->start();
           }
    
           QPropertyAnimation*     m_Animation;
           QColor                   m_BackgroundColor;
    };
    

    Thank for your answer.
    I have promote my button and rename object name but after compiling I have an error...
    http://prntscr.com/ca9e7r


  • Moderators

    @John_38
    for some reason the compiler doesn't know the type.
    Are you missing the include?


  • Moderators

    @John_38

    see this.
    Did you specify the include file where you copied my source?



  • @raven-worx I have make it... Didn't work..


  • Moderators

    @John_38
    probably it's also not good to name the button (variable) the same as it's type.



  • @raven-worx said in QPushButton Animation Hoverables:

    @John_38
    probably it's also not good to name the button (variable) the same as it's type.

    Problem fixed !
    It work !!
    Thank man !!!!!!



  • @raven-worx Hi, today I want test for text color of QPushButton.
    But it didn't work..
    Can you give me code or modifications for text ? Thank ! :-)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.