How to change GUI box background color for each gui button individual?

Question

The problem is at this part, the color is changing the background also for the PAUSE button and not only for the PLAY/STOP button.

Before i added this part the PAUSE button color changing was working fine but after adding this part in the PLAY/STOP button now the PAUSE part with the colors change is not working good as before. The background colors in the PLAY/STOP button also affecting the PAUSE background color when trying to change the PAUSE button color in runtime in the inspector.

if (test == false)
        {
            GUI.backgroundColor = Color.green;
            test1 = "STOP";
        }
        else
        {
            GUI.backgroundColor = Color.red;
            test1 = "PLAY";
        }

What i want to do is to be able to manipulate the background color for each button individual so one will not override/affect the other/s.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class GUIExamples : MonoBehaviour
{
    public Texture btnTexture;
    public Color color;
    
    public string colorInf;

    private GUIStyle currentStyle = null;
    private Color oldColor;
    private bool test = false;
    private string test1;

    private void Start()
    {
        oldColor = color;
    }

    private void OnGUI()
    {
        if (!btnTexture)
        {
            Debug.LogError("Please assign a texture on the inspector");
            return;
        }

        //GUI.backgroundColor = color;
        if (GUI.Button(new Rect(10, 10, 170, 30), "LOOP"))
            Debug.Log("Clicked the button with an image");

        //GUI.backgroundColor = color;
        if (GUI.Button(new Rect(10, 50, 170, 30), "CHANGE DIRECTION"))
            Debug.Log("Clicked the button with text");

        //GUI.backgroundColor = color;
        if (GUI.Button(new Rect(10, 90, 170, 30), "PING PONG"))
            Debug.Log("Clicked the button with text");

        if (test == false)
        {
            GUI.backgroundColor = Color.green;
            test1 = "STOP";
        }
        else
        {
            GUI.backgroundColor = Color.red;
            test1 = "PLAY";
        }
        if (GUI.Button(new Rect(10, 130, 170, 30), test1))
        {
            Debug.Log("Clicked the button with text");
            test = !test;
        }

        InitStyles(); 
        GUI.Box(new Rect(10, 170, 170, 30), "PAUSE", currentStyle);
        if (GUI.Button(new Rect(10, 170, 170, 30), "PAUSE", currentStyle))
            Debug.Log("Clicked the button with text");

        
    }

    private void InitStyles()
    {
            currentStyle = null;

            if (oldColor != color)
            {
                currentStyle = null;
            }

            if (currentStyle == null)
            {
                currentStyle = new GUIStyle(GUI.skin.box);
                currentStyle.normal.background = MakeTex(2, 2,
                    new Color(color.r, color.g, color.b));

                oldColor = color;
            }
    }

    private Texture2D MakeTex(int width, int height, Color col)
    {
        Color[] pix = new Color[width * height];
        for (int i = 0; i < pix.Length; ++i)
        {
            pix[i] = col;
        }
        Texture2D result = new Texture2D(width, height);
        result.SetPixels(pix);
        result.Apply();
        return result;
    }
}

Answer 1

You can create multiple GUISkin's.

public GUISkin pauseBtnStyle;  
public GUISkin playBtnStyle;

and then set the skin before drawing your control.

GUI.skin = pauseBtnStyle;  
if (GUI.Button(rect, "Pause")) 
{
    Debug.Log("Pause Clicked");
}  

GUI.skin = playBtnStyle;  
if (GUI.Button(rect, "Play")) 
{
    Debug.Log("Play Clicked");
}