Css Button visibly clicking but event not registering until repeated clicks

You were missing some typos in your code, use this html instead. where you had window.location.href = 'LoginE.html', your "l" in ".html" was missing. Also, you should use semicolons in your tag, after writing styles, and onclick. I added those as well.

I believe in your css you should also use double colons when using ::after psuedo class. I added those as well. Plus you vere missing some semicolons in the document which I added. Here is the updated code.

.button-round-leather {
  background: url(img/leather_background_light_brown.png);
  background-size: cover;
  border-radius: 50%;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  color: #F0E478; /* Light Gold */
  cursor: pointer;
  display: inline-block;
  font-size: 30px;
  height: 60px;
  margin: 0;
  padding: 20px;
  padding-top: 3px;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition-duration: 0.6s;
  width: 400px;
  vertical-align: top;
  align-items: flex-end;
}

.button-round-leather:hover {
  background: url(img/leather_background_dark_brown.png);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.9);
  transform: scale(0.95);
}

.button-round-leather span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-round-leather span::after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

.button-round-leather:hover span {
  padding-right: 25px;
}

.button-round-leather:hover span::after {
  opacity: 1;
  right: 0;
}

<html>

  <head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
  </head>

  <body>
    <script>
      // Store
      sessionStorage.setItem("language", "");

    </script>

    <!-- BUTTONS FOR MEMBERS -->
    <table>
      <tr>
        <! -- ENGLISH SPEAKING MEMBER -->
          <td style="width:30%;">
            <button class="button-round-leather" style="vertical-align:middle;" onclick="EnglishMember();">
              <span>
                Sign In
              </span>
            </button>
          </td>
          <td style="width:70%">
            <label>
              <h2>ENGLISH SPEAKING MEMBERS</h2>
            </label>
          </td>
      </tr>

      <!-- BUTTONS FOR GUESTS -->
      <tr>
        <! -- ENGLISH SPEAKING GUEST -->
          <td style="width:30%;">
            <button class="button-round-leather" style="vertical-align:middle;" onClick="EnglishGuest();">
              <span>
                I speak English
              </span>
            </button>
          </td>
          <td style="width:70%">
            <label>
              <h2>GUEST</h2>
            </label>
          </td>
    </table>

    <!--SET SESSION STORAGE VARIABLE -->

    <!-- <div id="result"></div> -->
    <script>
      //TAKE MEMBERS STRAIGHT TO LOGIN SCREEN
      //SET MEMBER LANGUAGE TO ENGLISH--GO TO LOGIN SCREEN
      function EnglishMember() {
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "DatabaseE");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginMembers.html';
        } else {
          // BROWSER ERROR
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }

    </script>
    <script>
      //TAKE GUESTS STRAIGHT TO GUEST SCREEN
      //SET GUEST LANGUAGE TO ENGLISH--GO TO GUEST SCREEN
      function EnglishGuest() {
        // CHECK BROWSER SUPPORT
        if (typeof(Storage) !== "undefined") {
          // STORE VARIABLE
          sessionStorage.setItem("language", "English");
          // RETRIEVE VARIABLE TO DISPLAY IN RESULT
          //document.getElementById("result").innerHTML = sessionStorage.getItem("language");
          // GO TO WEBSITE
          window.location.href = 'loginE.html';
          // BROWSER ERROR
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }

    </script>
  </body>

</html>

But, to the main issue, your button is working everytime, the problem is you have to click fast enough so the mouseclick-release hits while your mouse cursor is still ON the button. Because of your animation which makes the button fly upwards in a fast motion, when the mouse releases, sometimes it doesn't hit the button, and it hits the body of the document instead. Try clicking your buttons after removing the animation(or by clicking really fast, on the top side of the button. This ensures that when you release the mouseclick, it's still on top of the button", and you'll see that this is the cause of the issue. Your solution would be to add a delay of this animation by half a second, or so. This is totally up to you, as I do not know what you are using this for and how you want it to be.

Optionally, you could make the button move with JavaScript, after it has been clicked, instead of WHILE it's being clicked, which you have done in CSS.

Something like this would work:

var d = document.getElementById("btn");
d.addEventListener('click',function(){
    d.className = d.className + " moveBtn";
});

And you'll need to add a class with your preferances, which implies where the button should move, as you've already done, and use that class in the JS script above.

I hope this helps :)