createCanvas(800, 800);

  //object instantces

  b1 = new Button(100,100,80,30,"play",'rgb(0,255,0)','rgb(0,200,0)',function(){

    background(255,0,255);

  });

}

// classes

// button class

class Button {

  constructor(ixp, iyp, iw, ih, itext, icolor1, icolor2, ido) {

    this.w=iw; // button width

    this.h=ih; // button height

    this.posX=ixp; // button x postion

    this.posY=iyp; // button y position

    this.text=itext; // button label

    this.color1=icolor1; // button default color

    this.color2=icolor2; // button color when under mouse

    this.do=ido; // button function

  }

  checkMouse() {

    if (mouseX > this.posX && mouseX < this.posX + this.w && mouseY > this.posY && mouseY < this.posY + this.h){

      return true;      

    }

    else{

     return false; 

    }

  }

  display(){

   if(this.checkMouse()){

    fill(this.color2);

    }

  if(!this.checkMouse()){

    fill(this.color1)

    }

    rect(this.posX,this.posY,this.w,this.h)

    fill(0,0,0);

    textAlign(LEFT, BOTTOM);

    text(this.text,this.posX + this.w / 10,this.posY + this.h - this.h / 4);

  }

  handleClick(){

    if(this.checkMouse()){

      this.do();

    }

  }

}

function draw() {

  mousePressed=function(){

    b1.handleClick();

  background(200);

  b1.display();

  }

}