Question

I’ve this see a screengrab and blue circle is ok but grey circle appear funny even with two same css and js? I would appreciate how to correct a grey circle? I’m using both a same css and js but grey faired poorly.

align top http://www.kerrydeaf.com/circle.png

CSS3

  button {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#003F5F;
  }

  button:hover {
      background-color:#FFCC05; /*47C3D2*/
  }

  buttongrey {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#a8a9a2;
      }

  buttongrey:hover {
      background-color:#FFCC05;
  }

Javascript:

  <script type="text/javascript">
  $("button").click(function() {
    $(this).toggleClass("hover");
  });
  $("buttongrey").click(function() {
    $(this).toggleClass("hover");
  });
  </script>

UPDATE: HTML5

  <div data-role="content"> <div class="content_index"><!--START CONTENT and another at the END -->
          <div id="content_index_left" align="center">
          <ul data-role="listview">
              <li><a href="#page1"><button><img style="vertical-align: middle" src="images/index_10.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page1"><span class="bold_index">Ten tips</span></a></li><br />

              <li><a href="#page2"><button><img style="vertical-align: middle" src="images/index_triadic.svg" width="90%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page2"><span class="bold_index">Triadic Exchange</span></a></li><br />

              <li><a href="#page6"><buttongrey><img style="vertical-align: middle" src="images/index_deafculture.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page6"><span class="bold_index">Deaf Culture</span></a></li>
          </ul>
          </div> 
          <div id="content_index_right" align="center">           
          <ul data-role="listview">
              <li><a href="#page4"><button><img style="vertical-align: middle" src="images/index_video.svg" width="80%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page4"><span class="bold_index">Video</span></a></li><br />

              <li><a href="#page3"><button><img style="vertical-align: middle" src="images/index_examples.svg" width="85%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page3"><span class="bold_index">Examples</span></a></li><br />

              <li><a href="#page5"><buttongrey><img style="vertical-align: middle" src="images/index_disability.svg" width="90%" alt="" title="" border="0" class="shadow" /></button></a></li>
              <li><a href="#page5"><span class="bold_index">Disability Rights</span></a></li>
          </ul>
          </div>
      </div></div>

Answer 1

The html tag buttongrey doesn’t exist !!
For me this is the solution :

HTML :

<li>
  <a href="#page6">
     <button class="grey">
        <img style="vertical-align: middle" src="images/index_deafculture.svg" width="80%" alt="" title="" border="0" class="shadow" />
     </button>
  </a>
</li>

CSS :

.grey {
      height: 90px;
      width: 90px;
      border-radius: 50%;
      border: 3px solid #fff;
      background-color:#a8a9a2;
 }

.grey:hover {
     background-color:#FFCC05;
 }​