div+css实现炫酷按钮悬浮动画效果代码-html代码-BFW代码库

div+css实现炫酷按钮悬浮动画效果代码

代码语言：html

所属分类：悬停

代码描述：div+css实现炫酷按钮悬浮动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
.button--typeA{
    --mainColor   : #003c55 ;
    --subColor_1  : #e97100 ;
    --subColor_2  : #ff9b0a ;
    --accentColor : #cf005e ;
    --treeColor   : #7a5200 ;
    --skyColor    : #4aaeff ;
    --leafColor_1 : #008a49 ;
    --leafColor_2 : #00c94f ;
}
.button--typeB{
    --mainColor   : #7cba27 ;
    --subColor_1  : #94002c ;
    --subColor_2  : #ff5a5e ;
    --accentColor : #efad00 ;
    --treeColor   : #4a2a00 ;
    --skyColor    : #000645 ;
    --leafColor_1 : #cf8b00 ;
    --leafColor_2 : #f4b800 ;
}
.button--typeC{
    --mainColor   : #00c6d4 ;
    --subColor_1  : #ff9b0a ;
    --subColor_2  : #ffc26a ;
    --accentColor : #de8ccf ;
    --treeColor   : #af9667 ;
    --skyColor    : #ff7d5a ;
    --leafColor_1 : #57cf4f ;
    --leafColor_2 : #a9db74 ;
}

.button{
    position : relative ;
    width : 280px ;
    height : 80px ;
    border-radius : 40px 40px 4px 40px ;
    background : var(--treeColor) ;
    transition : all ease .3s ;
    box-shadow : 0 0 24px rgba(0,0,0,.2) ;
}
.button__wrapper{
    position : absolute ;
    z-index : 1 ;
    width : 100% ;
    height : 100% ;
    border-radius : 40px ;
}
.material1{
    position : absolute ;
    top : -45px ;
    right : -24px ;
    width : 64px ;
    height : 64px ;
    border-radius : 50% ;
    overflow : hidden ;
    transform : rotate(30deg) ;
}
.material2{
    position : absolute ;
    top : -44px ;
    right : 18px ;
    width : 48px ;
    height : 48px ;
    border-radius : 50% ;
    overflow : hidden ;
    transform : rotate(-40deg) ;
}
.material1::before{
    content : '' ;
    position : absolute ;
    top : 0 ;
    left : -50% ;
    width : 100% ;
    height : 100% ;
    border-radius : 50% ;
    background : var(--leafColor_1);
}
.material2::before{
    content : '' ;
    position : absolute ;
    top : 0 ;
    left : -50% ;
    width : 100% ;
    height : 100% ;
    border-radius : 50% ;
    background : var(--leafColor_2) ;
}
.button__text{
    display : flex ;
    justify-content : center ;
    align-items : center ;
    position : absolute ;
    z-index : 1 ;
    top : 0 ;
    right: 0 ;
    width : 160px ;
    height : 100% ;
    font-family: 'Paytone One', sans-serif;
    font-size : 32px ;
    color : #fff.........完整代码请登录后点击上方下载按钮下载查看