2

Css Button visibly clicking but event not registering until repeated clicks. The buttons only work after repeated clicks. They are customized by a CSS script. I never know when they will/won't click. The cursor indicates that it finds the whole button.

Here is the CSS description:

.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:.60s;
  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(.95);
}

.button-round-leather:active {
  content: ""; /* NEW */
  background: blue; /* NEW */
  display: block; /* NEW */
  background-color: #f1f1f1; /* Green */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
  position: absolute; /* NEW */
  padding-top: 20%;
  padding-left: 35%;
  position: relative;
  margin-left: -20px !important;
  margin-top: -120%;
  text-align: center;
  opacity: 0;
  transition: all 0.8s
}

.button-round-leather:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

.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;
}

Here is my HTML code:

<DOCTYPE html>
<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.htm';
          // BROWSER ERROR
        } else {
          document.getElementById("result").innerHTML = "Sorry, your browser does not support Web Storage...";
        }
      }
    </script>
</body>
</html>

1
  • Please pick the solution as your answer if it worked as you intended.
    – R. Srour
    Commented Jun 14, 2020 at 18:25

1 Answer 1

0

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 :)

3
  • 1
    Actually, I don't want it to fly upward. The only animation I wanted was the button to shrink a little when hover or click. But, I can't see what is making it do that. I removed the only section that said 'animate' and still it acts the same. Please tell me what needs to be removed.
    – Ann
    Commented Jun 11, 2020 at 6:20
  • Hi, I edited the CSS, now the animation is gone. Please pick it as the answer if it suits your need :)
    – R. Srour
    Commented Jun 11, 2020 at 9:45
  • Did it work as you wanted? If so, please select my solution as the answer so others can benefit from it. Thanks. @Ann
    – R. Srour
    Commented Jun 14, 2020 at 18:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.