How to change the image of a button that has 2 states from the server side?

With ASP.NET you could do it in the following way:

<asp:Button ID="MiBotonActivador" runat="server" Text="" CssClass="uncheck" OnClick="Toogle_Check" />

And within your <script runat="server"> you put the following function (or its equivalent according to whether you are using C # or Basic):

protected void Toogle_Check(object sender, EventArgs e) {
    if(Body.Attributes("class").Contains("uncheck")) {
        MiBotonActivador.CssClass = "check";
    } else {
        MiBotonActivador.CssClass = "uncheck";
    }
}

Now all you have to do is set the background image of the button by means of the check and uncheck classes respectively:

button.uncheck {
    background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678069-sign-error-512.png");
}

button.check {
    background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-512.png");
}

The truth is that I have not done anything in ASP.net for a long time so the above code may contain some error or it may not work as expected. I recommend doing it with Javascript using JQuery:

function toogleCheck(button) {
  var c = button.data("check"),
      u = button.data("uncheck"),
      s = button.data("status");
      
  if(s === "0") {
    button.css("background-image", "url(" + u + ")");
    button.data("status", "1");
  } else {
    button.css("background-image", "url(" + c + ")");
    button.data("status", "0");
  }
}

(function($) {
  $(document).ready(function(){
    toogleCheck($("button"));
    $("button").on("click", function(){
      toogleCheck($(this));
    });
  });
})(jQuery);

button {
  padding: 20px;
  background-color: #fab153;
  border:none;
  cursor: pointer;
  
  background-size: 100%;
  background-position: center center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button data-status="0" data-check="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-512.png" data-uncheck="https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678069-sign-error-512.png"></button>

You can also do it by mixing CSS and JS in the following way:

(function($) {
  $(document).ready(function(){
    $("button").on("click", function(){
      $(this).toggleClass("check").toggleClass("uncheck");
    });
  });
})(jQuery);

button {
  padding: 20px;
  background-color: #fab153;
  border:none;
  cursor: pointer;
  
  background-size: 100%;
  background-position: center center;
}

button.uncheck {
  background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678069-sign-error-512.png");
}

button.check {
  background-image: url("https://cdn0.iconfinder.com/data/icons/small-n-flat/24/678134-sign-check-512.png");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="uncheck"></button>

Greetings!

I found a solution in JavaScript that works but with a strange behavior at the beginning. The first time I load the page and press the button there is a time between moving from the first image to the other. In the space of that time it looks white. If then I press repeatedly the change is instantaneous.

function btnToogle() {
  if (document.getElementById('btn1').getAttribute('class') == 'cssboton1')
   document.getElementById('btn1').setAttribute('cssboton2');
  else 
   document.getElementById('btn1').setAttribute('cssboton1');
}