#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}


/* the problem is here, just a space, between #fb-button and :hover. See the Spaceholder's answer in this post. */
#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

<div id="fb-button">
  <div class="et_pb_code_inner">
    <button id="fb-button" onclick="myFbFunction()"></button>
  </div>
</div>

<div id="fb-review" class="et_pb_module">
  <div class="et_pb_code_inner">
    <!-- this is the fb review source code for the review template -->
    <script src="https://apps.elfsight.com/p/platform.js" defer></script>
    <div class="elfsight-app-f24ab324-722d-40af-b413-b052f62fdc99"></div>

    <script>
      function myFbFunction() {
        var x = document.getElementById('fb-review');
        if (x.style.display === 'block') {
          x.style.display = 'none';
        } else {
          x.style.display = 'block';
        }
      }
    </script>
  </div>
</div>

I tried to - Facebook button and the google button could be in black white as normal. But when someone hovers over these buttons, then the buttons will transform in color.

Here is the website link: https://gxm.ece.myftpupload.com/home/

This is my code. But it's not working. Can anyone assist me to find out the problem?

#fb-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/18-181292_facebook-5-star-reviews-hd-png-download__1_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;

}

#fb-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

#gl-button {   
            background-image: url('http://gxm.ece.myftpupload.com/wp-content/uploads/2021/10/download__3_-removebg-preview.png');
    width: 480px;
    height: 200px;
    border: none;
    background-color: #a52a2a00;
    background-size: cover;
    background-position: center center;
    cursor: pointer;
    filter: none;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    cursor: pointer;
    transition: all 300ms ease;    
}

#gl-button :hover{
    filter: none;
    -webkit-filter: grayscale(0%);
    -moz-filter: grayscale(0%);
    -ms-filter: grayscale(0%);
    -o-filter: grayscale(0%);
    width: 485px;
    height: 205px;
}

#fb-review, #gl-review {
    display: none;
} 

CodePudding user response：

All you have to do is remove spaces

#gl-button :hover into #gl-button:hover

and

#fb-button :hover into #fb-button:hover