let colors = ['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#00FFFF', '#FF00FF', 

              '#C0C0C0', '#800000', '#808000', '#008080', '#800080', '#000080', 

              '#008000', '#FFA500', '#A52A2A', '#FA8072', '#FFC0CB', '#FFD700', '#FFFFFF'];

​

function setup() {

  createCanvas(400, 400);

  // Create the button

  let button = createButton('Change Color');

  button.mousePressed(changeColor);

  // Style the button

  button.style('background-color', '#505050'); // Dark grey background

  button.style('border', 'none');

  button.style('color', 'white');

  button.style('padding', '10px 24px');

  button.style('border-radius', '12px');

  button.style('font-size', '18px');

  button.style('cursor', 'pointer');

  button.style('margin-top', '20px'); // Spacing from the canvas

  button.mouseOver(() => button.style('background-color', '#707070')); // Lighter grey when hovered

  button.mouseOut(() => button.style('background-color', '#505050')); // Back to dark grey when not hovered

}

​

function draw() {

  background(colors[colorIndex]);

}

​

function changeColor() {

  colorIndex = (colorIndex + 1) % colors.length;

}

​