div+css实现悬浮立体按钮变形动画效果代码-html代码-BFW代码库

div+css实现悬浮立体按钮变形动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现悬浮立体按钮变形动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
button {
  --b: .1em;    /* border thickness */
  --d: 20px;    /* the 3D depth */
  --h: 1.2em;   /* the height */
  --c: #3B8183; /* the color */
  
  --_s: calc(var(--d) + var(--b));
  line-height: var(--h);
  color: #0000;
  text-shadow: 
    0 calc(-1*var(--_t,0em)) var(--c), 
    0 calc(var(--h) - var(--_t,0em)) #fff;
  border: solid #0000;
  overflow: hidden;
  border-width: var(--b) var(--b) var(--_s) var(--_s);
  background:
    linear-gradient(var(--c) 0 0) 100% 100%
     /101% var(--_p,0%) no-repeat,
    conic-gradient(at left var(--d)  bottom var(--d),
      #0000 90deg, rgb(255 255 255 /0.3) 0 225deg,rgb(255 255 255 /0.6) 0) border-box,
    conic-gradient(at left var(--_s) bottom var(--_s),
      #0000 90deg,var(--c) 0) 0 100%/calc(100% - var(--b)) calc(100% - var(--b))  border-box;
  transform: translate(calc(var(--_i,var(--d))/-1),var(--_i,var(--d)));
  clip-path: 
.........完整代码请登录后点击上方下载按钮下载查看