Change button color on hover

Help & Support
1

Hi, does anybody know how to change button’s color on hoverstart? I made solution in which i disable that button on hoverstart and enable another button (with diffrent color) on this solution makes clicking on these buttons kinda tricky.

2

Hi @Lukas_Zahumensky,

Just to make sure, do the tint option on the ButtonComponent not work for you?

https://developer.playcanvas.com/en/user-manual/packs/components/button/

If not, here is a sample script I used to update a button’s child text on hover, but you can easily change the color of the button itself with it.

var SomeScript = pc.createScript('someScript');

SomeScript.prototype.initialize = function() {
	this.origColor = this.entity.children[0].element.color.clone();
	this.hoverColor = {r:1, g:1, b:1, a:1};
	this.tweenColor = this.origColor.clone();
	this.hoverTween = this.entity.tween(this.tweenColor)
	    .to(this.hoverColor, 0.125, pc.Linear)
	    .on('update', this.onHoverUpdate, this);

	this.unhoverTween = this.entity.tween(this.tweenColor)
	    .to(this.origColor, 0.125, pc.Linear)
	    .on('update', this.onHoverUpdate, this);

	this.entity.button.on('mouseenter', this.onHover, this);
	this.entity.button.on('mouseleave', this.onUnHover, this);
};

SomeScript.prototype.onHoverUpdate = function() {
    this.entity.children[0]element.color = this.tweenColor;
};

SomeScript.prototype.onHover = function() {
    this.unhoverTween.stop();
    
    this.hoverTween = this.entity.tween(this.tweenColor)
        .to(this.hoverColor, 0.125, pc.Linear)
        .on('update', this.onHoverUpdate, this);
    
    this.hoverTween.start();
};

SomeScript.prototype.onUnHover = function() {
    this.hoverTween.stop();
    
    this.unhoverTween = this.entity.tween(this.tweenColor)
        .to(this.origColor, 0.125, pc.Linear)
        .on('update', this.onHoverUpdate, this);
    
    this.unhoverTween.start();
};
2 Likes
3

yes that works thanks, but how can I change buttons text color on button hover?

4

got it :smiley: