QPushButton Animation Hoverables

[John_38]

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

[raven-worx]

@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.

[John_38]

@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]

@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

[raven-worx]

@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.

[John_38]

@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

[John_38]

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

John

[raven-worx]

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

[John_38]

@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

[raven-worx]

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

[raven-worx]

@John_38

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

[John_38]

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

[raven-worx]

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

[John_38]

@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 !!!!!!

[John_38]

@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 ! :-)