css实现按钮点击涟漪背景动画效果代码-html代码-BFW代码库

css实现按钮点击涟漪背景动画效果代码

代码语言：html

代码描述：css实现按钮点击涟漪背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  place-content: center;
  place-items: center;
  gap: 1rem;
  font-family: 'Raleway', sans-serif;
  background-color: #F9F6EF;
  background-image: radial-gradient(at bottom right, #EBEBE3 30%, #F9F6EF 100%);
}
h1 {
  text-align: center;
  font-size: clamp(1.5rem, 5vw, 2rem);
}
.btn {
  color: var(--btn-clr);
  appearance: none;
  cursor: pointer;
  padding: 1rem 2rem;
  font-size: 1rem;
  border: 2px solid currentColor;
  background: transparent;
  border-radius: 5px;
  width: fit-content;
  height: fit-content;
}
.btn-primary {
  --btn-clr: #5EB0E5;
}
.btn-secondary {
  --btn-clr: #25282A90;
}
.btn-cancel {
  --btn-clr: #A5282C;
}
.ripple-out {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-content: center;
  overflow: hidden;
}
.ripple-out::before {
  content: '';
  position: absolute;
  width: 150%;
  aspect-ratio: 1 / 1;
  background-color: var(--btn-clr);
  z-index: -1;
  opacity: 0.3;
  border-radius: 50.........完整代码请登录后点击上方下载按钮下载查看