title: Getting right position of clicked button (ripple effect)
body: <p>I have problem with finding the right position of click. I want to make google material design - ripple effect on clicked button. Circle need to be on button not somewhere else. So when you click on button white circle is showing somewhere else not above the wanted button. Where is the mistake i made?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      var btnClick, bWidth, bHeight, x, y, posX, posY,d;
      $(".btn").click(function (e) {
          e.preventDefault();
  
          posX = $(this).offset().left;
          posY = $(this).offset().top;
          bWidth = $(this).outerWidth();
          bHeight = $(this).outerHeight();
          d = Math.max(bWidth,  bHeight);
          
          $(".btn-over").remove();
  
          if ($(this).find(".btn-over").length === 0) {
              $(this).prepend("&lt;span class='btn-over'&gt;&lt;/span&gt;");
          }
  
  //        btnClick = $(this).children(".btn-over");
  //        btnClick.removeClass("animation");
  //            if (!btnClick.height() &amp;&amp; !btnClick.width()) {
  //            d = Math.max($(this).outerWidth(), $(this).outerHeight());
  //            btnClick.css({
  //                height: d,
  //                width: d
  //            });
  //        }
  
          x = e.pageX - posX - bWidth / 2;
          y = e.pageY - posY - bHeight /2;
  
          $(".btn-over").css({
              width: d,
              height: d,
              top: y + 'px',
              left: x + 'px'
          }).addClass("animation");
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>nav {
    height: 3rem;
    background-color: #424242;
    color: #fff; }
  
  .menu {
    list-style: none;
    float: right; }
    .menu li {
      display: inline-block; }
  
  .btn-sigup {
    box-shadow: none;
    background-color: #4CAF50; }
    .btn-sigup:hover {
      background-color: #66BB6A;
      box-shadow: none; }
  
  .btn-login {
    box-shadow: none;
    background-color: transparent; }
    .btn-login:hover {
      box-shadow: none;
      background-color: transparent; }
  
  .btn-over {
    display: inline-block;
    position: absolute;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 100%;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0); }
  
  .animation {
    -webkit-animation: ripple 0.65s linear;
    -moz-animation: ripple 0.65s linear;
    -ms-animation: ripple 0.65s linear;
    -o-animation: ripple 0.65s linear;
    animation: ripple 0.65s linear; }
  
  @-webkit-keyframes ripple {
    100% {
      opacity: 0;
      -webkit-transform: scale(2.5); } }
  
  @-moz-keyframes ripple {
    100% {
      opacity: 0;
      -moz-transform: scale(2.5); } }
  
  @-o-keyframes ripple {
    100% {
      opacity: 0;
      -o-transform: scale(2.5); } }
  
  @keyframes ripple {
    100% {
      opacity: 0;
      transform: scale(2.5); } }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;header&gt;
          &lt;nav&gt;
              &lt;ul class="menu"&gt;
                  &lt;li&gt;
                      &lt;button class="btn btn-login"&gt;LOG IN&lt;/button&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;button class="btn btn-sigup"&gt;SING UP&lt;/button&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
      &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>