div+css实现玻璃立方体按钮悬浮填充动画效果代码-html代码-BFW代码库

div+css实现玻璃立方体按钮悬浮填充动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现玻璃立方体按钮悬浮填充动画效果代码，

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


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

<head>

  <meta charset="UTF-8">


<link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap" rel="stylesheet">
  
  
  
<style>
.button{
    --top : rgba(100,100,100,.8) ;
    --bottom : rgba(100,100,100,.2) ;
    --side : rgba(100,100,100,.5) ;

    --1_top : rgba(216,0,60,.8) ;
    --1_bottom : rgba(216,0,60,.2) ;
    --1_side : rgba(216,0,60,.5) ;

    --2_top : rgba(0,100,190,.8) ;
    --2_bottom : rgba(0,100,190,.2) ;
    --2_side : rgba(0,100,190,.5) ;

    --3_top : rgba(0,170,100,.8) ;
    --3_bottom : rgba(0,170,100,.2) ;
    --3_side : rgba(0,170,100,.5) ;

    --4_top : rgba(255,230,20,.8) ;
    --4_bottom : rgba(255,230,20,.2) ;
    --4_side : rgba(255,230,20,.5) ;

    --5_top : rgba(155,50,255,.8) ;
    --5_bottom : rgba(155,50,255,.2) ;
    --5_side : rgba(155,50,255,.5) ;
}

.button{
    display : flex ;
    position : relative ;
    width : 280px ;
    height : 80px ;
    text-decoration : none ;
    perspectiv.........完整代码请登录后点击上方下载按钮下载查看