div+css布局实现炫酷玻璃质感按钮悬停动画代码-html代码-BFW代码库

div+css布局实现炫酷玻璃质感按钮悬停动画代码

代码语言：html

所属分类：悬停

代码描述：div+css布局实现炫酷玻璃质感按钮悬停动画代码

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

     <style>
body{
    background:black;
}
.btn-wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  user-select: none;
  filter: drop-shadow(0 4px 4px #0005);
}

.btn-wrapper .message {
  position: absolute;
  bottom: 20px;
  font-family: "Inter", sans-serif;
  font-weight: 200;
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #fff4;
  filter: drop-shadow(0 -6px 8px #fff);
  margin-top: 0rem;

  .warning {
    color: #fe06;
  }
}

.btn {
  --color-1: 200, 220, 250;
  --color-bg: 20, 0, 30;
  --color-fg: 230, 230, 230;

  --border-radius: 100px / 200px;
  --pad: 1px;

  cursor: pointer;

  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  letter-spacing: 0.15em;
  color: rgba(var(--color-fg), 0.265);
  text-shadow: 0 0 2px rgba(var(--color-1), 0..........完整代码请登录后点击上方下载按钮下载查看