使用Javascript和CSS可以点击Ripple Buttons

4 回答

• 0

  你可以在 <button> 周围包裹 <a>

  <!-- begin snippet: js hide: false console: true babel: false -->
     
  
   (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
  
  debounce = function(func, delay) {
    var inDebounce;
    inDebounce = undefined;
    return function() {
      var args, context;
      context = this;
      args = arguments;
      clearTimeout(inDebounce);
      return inDebounce = setTimeout(function() {
        return func.apply(context, args);
      }, delay);
    };
  };
  
  showRipple = function(e) {
    var pos, ripple, rippler, size, style, x, y;
    ripple = this;
    rippler = document.createElement('span');
    size = ripple.offsetWidth;
    pos = ripple.getBoundingClientRect();
    x = e.pageX - pos.left - (size / 2);
    y = e.pageY - pos.top - (size / 2);
    style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
    ripple.rippleContainer.appendChild(rippler);
    return rippler.setAttribute('style', style);
  };
  
  cleanUp = function() {
    while (this.rippleContainer.firstChild) {
      this.rippleContainer.removeChild(this.rippleContainer.firstChild);
    }
  };
  
  ripples = document.querySelectorAll('[ripple]');
  
  for (i = 0, len = ripples.length; i < len; i++) {
    ripple = ripples[i];
    rippleContainer = document.createElement('div');
    rippleContainer.className = 'ripple--container';
    ripple.addEventListener('mousedown', showRipple);
    ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
    ripple.rippleContainer = rippleContainer;
    ripple.appendChild(rippleContainer);
  }
   }());
  

  .bg--red {
        background-color: #e74c3c;
      }
      .tx--red {
        color: #e74c3c;
      }
      .bg--blue {
        background-color: #00f;
      }
      .tx--blue {
        color: #00f;
      }
      .bg--green {
        background-color: #2ecc71;
      }
      .tx--green {
        color: #2ecc71;
      }
      .bg--white {
        background-color: #fff;
      }
      .tx--white {
        color: #fff;
      }
      body {
        color: #777;
        text-align: center;
        padding: 0 0 0 0;
        margin: 0 0 0 0;
      }
      button {
        border: none;
        padding: 20px;
        margin: 10px;
        font-size: 14px;
        outline: 0;
        box-shadow: 0px 2px 4px 0px #000;
        border-radius: 4px;
      }
      button:active {
        box-shadow: 0px 2px 6px 0px #000;
      }
      [ripple] {
        position: relative;
        overflow: hidden;
      }
      [ripple] .ripple--container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
      [ripple] .ripple--container span {
        transform: scale(0);
        border-radius: 100%;
        position: absolute;
        opacity: 0.75;
        background-color: #fff;
        animation: ripple 1000ms;
      }
      @-moz-keyframes ripple {
        to {
          opacity: 0;
          transform: scale(2);
        }
      }
      @-webkit-keyframes ripple {
        to {
          opacity: 0;
          transform: scale(2);
        }
      }
      @-o-keyframes ripple {
        to {
          opacity: 0;
          transform: scale(2);
        }
      }
      @keyframes ripple {
        to {
          opacity: 0;
          transform: scale(2);
        }
      }
  

  <div class="content">
        <a  class="bg--red tx--white" ripple="ripple" href="http://www.google.de">Fail</a>
        <a href="https://www.google.com/" target="_blank"><button class="bg--blue tx--white" ripple="ripple">Info</button></a>
        <a href="https://www.google.com/" target="_blank"><button class="bg--green tx--white" ripple="ripple">Save</button></a>
      </div>
  

  回复于 2024-04-27T12:21:33+08:00
• 0

  试试这个....它在这里不起作用，因为stackoverflow禁用了重定向....

  (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
  
  $('.bg--blue').on('click',function(){
  window.open("https://stactoverflow.com")
  })
  $('.bg--green').on('click',function(){
  window.open("https://stactoverflow.com")
  })
  
  debounce = function(func, delay) {
    var inDebounce;
    inDebounce = undefined;
    return function() {
      var args, context;
      context = this;
      args = arguments;
      clearTimeout(inDebounce);
      return inDebounce = setTimeout(function() {
        return func.apply(context, args);
      }, delay);
    };
  };
  
  showRipple = function(e) {
    var pos, ripple, rippler, size, style, x, y;
    ripple = this;
    rippler = document.createElement('span');
    size = ripple.offsetWidth;
    pos = ripple.getBoundingClientRect();
    x = e.pageX - pos.left - (size / 2);
    y = e.pageY - pos.top - (size / 2);
    style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
    ripple.rippleContainer.appendChild(rippler);
    return rippler.setAttribute('style', style);
  };
  
  cleanUp = function() {
    while (this.rippleContainer.firstChild) {
      this.rippleContainer.removeChild(this.rippleContainer.firstChild);
    }
  };
  
  ripples = document.querySelectorAll('[ripple]');
  
  for (i = 0, len = ripples.length; i < len; i++) {
    ripple = ripples[i];
    rippleContainer = document.createElement('div');
    rippleContainer.className = 'ripple--container';
    ripple.addEventListener('mousedown', showRipple);
    ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
    ripple.rippleContainer = rippleContainer;
    ripple.appendChild(rippleContainer);
  }
   }());
  

  .bg--red {
    background-color: #e74c3c;
  }
  .tx--red {
    color: #e74c3c;
  }
  .bg--blue {
    background-color: #00f;
  }
  .tx--blue {
    color: #00f;
  }
  .bg--green {
    background-color: #2ecc71;
  }
  .tx--green {
    color: #2ecc71;
  }
  .bg--white {
    background-color: #fff;
  }
  .tx--white {
    color: #fff;
  }
  body {
    color: #777;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
  button {
    border: none;
    padding: 20px;
    margin: 10px;
    font-size: 14px;
    outline: 0;
    box-shadow: 0px 2px 4px 0px #000;
    border-radius: 4px;
  }
  button:active {
    box-shadow: 0px 2px 6px 0px #000;
  }
  [ripple] {
    position: relative;
    overflow: hidden;
  }
  [ripple] .ripple--container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  [ripple] .ripple--container span {
    transform: scale(0);
    border-radius: 100%;
    position: absolute;
    opacity: 0.75;
    background-color: #fff;
    animation: ripple 1000ms;
  }
  @-moz-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-webkit-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-o-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <div class="content">
    <a  class="bg--red tx--white" ripple="ripple" href="http://www.google.de">Fail</a>
    <button class="bg--blue tx--white" ripple="ripple">Info</button>
    <button class="bg--green tx--white" ripple="ripple">Save</button>
  </div>
  

  回复于 2024-04-27T12:21:33+08:00
• 2

  将您的CSS更改为以下内容

  (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
  
  debounce = function(func, delay) {
    var inDebounce;
    inDebounce = undefined;
    return function() {
      var args, context;
      context = this;
      args = arguments;
      clearTimeout(inDebounce);
      return inDebounce = setTimeout(function() {
        return func.apply(context, args);
      }, delay);
    };
  };
  
  showRipple = function(e) {
    var pos, ripple, rippler, size, style, x, y;
    ripple = this;
    rippler = document.createElement('span');
    size = ripple.offsetWidth;
    pos = ripple.getBoundingClientRect();
    x = e.pageX - pos.left - (size / 2);
    y = e.pageY - pos.top - (size / 2);
    style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
    ripple.rippleContainer.appendChild(rippler);
    return rippler.setAttribute('style', style);
  };
  
  cleanUp = function() {
    while (this.rippleContainer.firstChild) {
      this.rippleContainer.removeChild(this.rippleContainer.firstChild);
    }
  };
  
  ripples = document.querySelectorAll('[ripple]');
  
  for (i = 0, len = ripples.length; i < len; i++) {
    ripple = ripples[i];
    rippleContainer = document.createElement('div');
    rippleContainer.className = 'ripple--container';
    ripple.addEventListener('mousedown', showRipple);
    ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
    ripple.rippleContainer = rippleContainer;
    ripple.appendChild(rippleContainer);
  }
   }());
  

  .bg--red {
    background-color: #e74c3c;
  }
  .tx--red {
    color: #e74c3c;
  }
  .bg--blue {
    background-color: #00f;
  }
  .tx--blue {
    color: #00f;
  }
  .bg--green {
    background-color: #2ecc71;
  }
  .tx--green {
    color: #2ecc71;
  }
  .bg--white {
    background-color: #fff;
  }
  .tx--white {
    color: #fff;
  }
  body {
    color: #777;
    text-align: center;
    padding: 0 0 0 0;
    margin: 40px 0 0 0;
  }
  a {/**change the style on the link not the button**/
    border: none;
    padding: 20px;
    margin: 10px;
    font-size: 14px;
    outline: 0;
    box-shadow: 0px 2px 4px 0px #000;
    border-radius: 4px;
    text-decoration:none;/**remove the link underline**/
  }
  a:active {/**probabily don't need this**/
    box-shadow: 0px 2px 6px 0px #000;
  }
  [ripple] {
    position: relative;
    overflow: hidden;
  }
  [ripple] .ripple--container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  [ripple] .ripple--container span {
    transform: scale(0);
    border-radius: 100%;
    position: absolute;
    opacity: 0.75;
    background-color: #fff;
    animation: ripple 1000ms;
  }
  @-moz-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-webkit-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-o-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  

  <div class="content">
    <a  class="bg--red tx--white" ripple="ripple" href="http://www.google.de">Fail</a>
    <a class="bg--blue tx--white" ripple="ripple"  href="http://www.google.de">Info</a>
    <a class="bg--green tx--white" ripple="ripple"  href="http://www.google.de">Save</a>
  </div>
  

  回复于 2024-04-27T12:21:33+08:00
• 0

  (function() { var cleanUp, debounce, i, len, ripple, rippleContainer, ripples, showRipple;
  
  debounce = function(func, delay) {
    var inDebounce;
    inDebounce = undefined;
    return function() {
      var args, context;
      context = this;
      args = arguments;
      clearTimeout(inDebounce);
      return inDebounce = setTimeout(function() {
        return func.apply(context, args);
      }, delay);
    };
  };
  
  showRipple = function(e) {
    var pos, ripple, rippler, size, style, x, y;
    ripple = this;
    rippler = document.createElement('span');
    size = ripple.offsetWidth;
    pos = ripple.getBoundingClientRect();
    x = e.pageX - pos.left - (size / 2);
    y = e.pageY - pos.top - (size / 2);
    style = 'top:' + y + 'px; left: ' + x + 'px; height: ' + size + 'px; width: ' + size + 'px;';
    ripple.rippleContainer.appendChild(rippler);
    return rippler.setAttribute('style', style);
  };
  
  cleanUp = function() {
    while (this.rippleContainer.firstChild) {
      this.rippleContainer.removeChild(this.rippleContainer.firstChild);
    }
  };
  
  ripples = document.querySelectorAll('[ripple]');
  
  for (i = 0, len = ripples.length; i < len; i++) {
    ripple = ripples[i];
    rippleContainer = document.createElement('div');
    rippleContainer.className = 'ripple--container';
    ripple.addEventListener('mousedown', showRipple);
    ripple.addEventListener('mouseup', debounce(cleanUp, 2000));
    ripple.rippleContainer = rippleContainer;
    ripple.appendChild(rippleContainer);
  }
   }());
  

  .bg--red {
    background-color: #e74c3c;
  }
  .tx--red {
    color: #e74c3c;
  }
  .bg--blue {
    background-color: #00f;
  }
  .tx--blue {
    color: #00f;
  }
  .bg--green {
    background-color: #2ecc71;
  }
  .tx--green {
    color: #2ecc71;
  }
  .bg--white {
    background-color: #fff;
  }
  .tx--white {
    color: #fff;
  }
  body {
    color: #777;
    text-align: center;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
  }
  button,a { /* style the anchor as a button */
    border: none;
    padding: 20px;
    margin: 10px;
    font-size: 14px;
    outline: 0;
    box-shadow: 0px 2px 4px 0px #000;
    border-radius: 4px;
  }
  button:active {
    box-shadow: 0px 2px 6px 0px #000;
  }
  [ripple] {
    position: relative;
    overflow: hidden;
  }
  [ripple] .ripple--container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  [ripple] .ripple--container span {
    transform: scale(0);
    border-radius: 100%;
    position: absolute;
    opacity: 0.75;
    background-color: #fff;
    animation: ripple 1000ms;
  }
  @-moz-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-webkit-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @-o-keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  @keyframes ripple {
    to {
      opacity: 0;
      transform: scale(2);
    }
  }
  

  <div class="content">
    <a  class="bg--red tx--white" ripple="ripple" href="http://www.google.de">Fail</a>
    <button class="bg--blue tx--white" ripple="ripple">Info</button>
    
    <!-- change this to anchor -->
    <a href="http://www.google.com" class="bg--green tx--white" ripple="ripple">Save</a>
    
    
  </div>
  

  尝试将锚元素设置为按钮 . 对html和css做了一些修改..检查一下

  回复于 2024-04-27T12:21:33+08:00