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>