流体按钮悬浮动画效果-html代码-BFW代码库

流体按钮悬浮动画效果

代码语言：html

所属分类：悬停

代码描述：流体按钮悬浮动画效果

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


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

<head>

  <meta charset="UTF-8">
  


  
  
<style>
html, body {
  margin: 50px;
  padding: 0;
  background: #38277F;
}

canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: -1;
}


.button {
  background: none;
  padding: 20px;
  border-radius: 50px;
  position: relative;
  margin-top: 5px;
  display: inline-block;
  font-family: 'Glamour Absolute', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: white;
  text-decoration: none;
  /* border: 1px solid red; */
  z-index: 2;
  font-weight: 100;
  font-size: 30px;
  letter-spacing: 1px;
  margin: 50px;
}
</style>



</head>

<body translate="no" >
  <!-- Forked From https://codepen.io/Zaku/pen/JNxKKY?editors=0100 -->

  <a class="button" href="#" data-text="hey">
    bfw.wiki
  </a>

  <a class="button" href="#" data-text="hey">
    Buy now! $10
  </a>
  <a class="button" href="#" data-text="hey">
    small
  </a>
  <a class="button" href="#" data-text="hey">
    A Really Long button with text
  </a>

  
      <script>
const LiquidButton = class LiquidButton {
  constructor(button) {
    const { width, height } = button.getBoundingClientRect();
    const buttonStyles = window.getComputedStyle(button);
    console.log();
    const options = button.dataset || {};

    this.font = `${buttonStyles['font-size']} ${buttonStyles['font-family']}`;
    console.log(this.font);
    this.tension = options.te.........完整代码请登录后点击上方下载按钮下载查看