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.490173C75.7066 0.490173 1.72013 73.6657 0.410581 164.118C-0.918915 255.98 73.6126 332.1 165.487 332.632C193.859 332.798 221.187 325.858 245.457 312.669C247.823 311.386 248.189 308.129 246.175 306.347L230.633 292.574C227.475 289.775 222.982 288.984 219.093 290.633C202.155 297.839 183.748 301.521 164.776 301.289C90.5371 300.378 30.5569 238.61 31.7402 164.377C32.9101 91.0821 92.897 31.8198 166.465 31.8198H301.202V271.315L224.756 203.391C222.284 201.191 218.494 201.623 216.5 204.262C204.229 220.509 184.24 230.613 162.037 229.084C131.24 226.957 106.285 202.161 103.978 171.377C101.22 134.656 130.322 103.892 166.465 103.892C199.157 103.892 226.079 129.052 228.891 161.027C229.144 163.872 230.427 166.524 232.561 168.419L252.47 186.068C254.73 188.069 258.313 186.846 258.871 183.874C260.307 176.196 260.812 168.199 260.247 159.996C257.043 113.238 219.166 75.62 172.388 72.7417C118.756 69.4379 73.9184 111.39 72.4959 163.978C71.1065 215.23 113.099.........完整代码请登录后点击上方下载按钮下载查看