div+css实现立体中性按钮悬浮点击效果代码-html代码-BFW代码库

div+css实现立体中性按钮悬浮点击效果代码

代码语言：html

代码描述：div+css实现立体中性按钮悬浮点击效果代码

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

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

<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Sigmar&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<style>
    body {
  --icon-size: calc(1em * 1.14);
  --icon-margin: 0;
  --ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
  display: grid;
  justify-items: center;
  gap: 3rem;
  padding: 1rem;
  font-family: "Sigmar", cursive;
  font-size: 24px;
  text-transform: uppercase;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: pointer;
  background: #C9AEE2;
  color: #2e3c41;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin: 4rem auto;
  margin-bottom: 0;
}
body .btn {
  --bt-mod: 1;
  --bt-x: 5px;
  --bt-xy: calc(var(--bt-x) * var(--bt-mod));
  --bt-xyo: calc(var(--bt-x) * var(--bt-mod) * -1);
  --bt-bl: 15px;
  --bt-c1: #9d88b0;
  --bt-c2: #f5d4ff;
  --bt-c3: #b59dcb;
  --bt-c4: #d7baf2;
  --bt-s1: var(--bt-xy) var(--bt-xy) var(--bt-bl) var(--bt-c1);
  --bt-s2: var(--bt-xyo) var(--bt-xyo) var(--bt-bl) var(--bt-c2);
  --bt-s-n: var(--bt-s1), var(--bt-s2);
  --bt-s-a: inset var(--bt-s1), inset var(--bt-s2);
  --bt-s-a: inset var(--bt-s1), inset var(--bt-s2);
  background: #C9AEE2;
  borde.........完整代码请登录后点击上方下载按钮下载查看