div+css实现立体按钮点击凹凸效果代码-html代码-BFW代码库

div+css实现立体按钮点击凹凸效果代码

代码语言：html

代码描述：div+css实现立体按钮点击凹凸效果代码

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

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

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


  
<style>
:root {
  --size: 2em;
  --padding: 0.1em;
  --spring-easing: linear(
    0,
    0.178 3.4%,
    1.025 12.7%,
    1.179,
    1.249 18.6%,
    1.254 20.5%,
    1.233 22.6%,
    1.001 32.9%,
    0.938 39%,
    0.941 43.2%,
    0.999 53.2%,
    1.015 59.1%,
    0.996 79%,
    1.001
  );
  --purple-fill: radial-gradient(
    170.26% 170.26% at 111.61% 118.75%,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(98, 0, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 100%
  ),
    #6200ff;
  --purple-fill-back: radial-gradient(
    111.94% 111.94% at 14.84% 14.84%,
    rgba(246, 240, 255, 0.6) 0%,
    rgba(76, 5, 189, 0.6) 50%,
    rgba(246, 240, 255, 0.6) 100%
  ),
    #6200ff;
}

body {
  display: grid;
  place-items: center;
  padding-block-start: 10vh;
}

.inner {
  line-height: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-fill);
  background-size: 200% 200%;
  background-position: 80% 80%; 
  border-radius: 100%;
  color: white;
  transform: translateY(calc(-1 * var(--padding)));
  transition: inherit;
}
.isOpen .inner {.........完整代码请登录后点击上方下载按钮下载查看