css实现悬浮滑动式按钮效果代码-html代码-BFW代码库

css实现悬浮滑动式按钮效果代码

代码语言：html

所属分类：悬停

代码描述：css实现悬浮滑动式按钮效果代码

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


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

<head>

  <meta charset="UTF-8">

  
  
<style>
@layer properties {
  @property --border-lightness {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }
  @property --button-before-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 100;
  }
  @property --button-shadow-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --logo-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --text-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --icon-offset {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  @property --arrow-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
}
* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

:root {
  --ic-arrow-top-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-arrow-up-right'%3E%3Cline x1='7' y1='17' x2='17' y2='7'%3E%3C/line%3E%3Cpolyline points='7 7 17 7 17 17'%3E%3C/polyline%3E%3C/svg%3E");
  --ic-algolia: url("data:image/svg+xml,%3Csvg width='333' height='333' viewBox='0 0 333 333' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M166.465 0..........完整代码请登录后点击上方下载按钮下载查看