title: Google Material style - Button not working in safari
body: <p>I am working on a material style button for my new site.</p>
  
  <p>It seems to work in all browsers apart from Safari...</p>
  
  <p>You can view it here: <a href="http://codepen.io/anon/pen/jyVBpL" rel="nofollow noreferrer">http://codepen.io/anon/pen/jyVBpL</a></p>
  
  <pre><code>&lt;div class="buttona"&gt;View our work&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body{
   margin:0;
   padding:0;
  }
  .wrapper {
      display: block;
    width:99.6%;
    margin:0.2%;
  }
  
  .wrapper:after {
      content:"";
      display:table;
      clear:both;
  }
  
  .buttona {
      width:auto;
      height:65px;
      padding:0px 25px 0px 25px;
      display:inline-block;
      background-color:#ff5252;
      color:#ffffff;
      letter-spacing:1px;
  
      font-size:19px;
      line-height:65px;
  
      background-image: none;
      background-repeat:no-repeat;
      background-position: right 18px center;
  
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      -ms-border-radius:2px;
      border-radius: 2px;
  
    position:relative;
      overflow:hidden;
      -webkit-transition: all 0.2s ease;
      -moz-transition: all 0.2s ease;
      -o-transition: all 0.2s ease;
      transition: all 0.2s ease;
      z-index:0;
  }
  
  
  .ink {
    display: block;
    position: absolute;
    background:rgba(255, 255, 255, 0.2);
    border-radius: 100%;
    -webkit-transform:scale(0);
       -moz-transform:scale(0);
         -o-transform:scale(0);
            transform:scale(0);
  }
  
  .animate {
      -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>
  
  <p>Jquery</p>
  
  <pre><code>/*jQuery*/
  
  $(function(){
      var ink, d, x, y;
      $(".buttona").click(function(e){
      if($(this).find(".ink").length === 0){
          $(this).prepend("&lt;span class='ink'&gt;&lt;/span&gt;");
      }
  
      ink = $(this).find(".ink");
      ink.removeClass("animate");
  
      if(!ink.height() &amp;&amp; !ink.width()){
          d = Math.max($(this).outerWidth(), $(this).outerHeight());
          ink.css({height: d, width: d});
      }
  
      x = e.pageX - $(this).offset().left - ink.width()/2;
      y = e.pageY - $(this).offset().top - ink.height()/2;
  
      ink.css({top: y+'px', left: x+'px'}).addClass("animate");
  });
  });
  </code></pre>
  
  <p>Any questions please let me know</p>
  
  <p>Thank you in advance.</p>