css按钮点击波纹特效demo

    选择打赏方式

本站已不再更新,最新资源请前往zcjun.com获取!

HTML

<button class="btn ripple">Button</button>

CSS

.btn {
    position: relative;
    margin: 0 auto;
    width: 200px;
    height: 50px;
    line-height: 50px;
    border-radius: 4px;
    box-shadow: 0 0 10px gray;
    background-color: #fff;
    overflow: hidden;
    cursor: pointer;
  }
  
  .ripple {
      position: relative;
      overflow: hidden;
  }
  
  .ripple:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, #852 10%, transparent 20%);
      background-repeat: no-repeat;
      background-position: 50%;
      transform: scale(10, 10);
      opacity: 0;
      transition: transform 1s, opacity 1s;
  }
  
  .ripple:active:after {

      transform: scale(0, 0);
      opacity: .3;
      transition: 0s;
  }

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:css按钮点击波纹特效demo https://old.zcjun.com/learn/522.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!