music/test.html at main · x8rr/music · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
<button class="liquid-glass">
    <svg class="logo" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
        <path d="M12 2C10 2 8 3.5 8 5.5s2 3.5 4 3.5 4 1.5 4 3.5-2 3.5-4 3.5-4-1.5-4-3.5" />
        <circle cx="12" cy="12" r="10" stroke-opacity="0.2" />
    </svg>
    <span>Liquid Glass</span>
</button>

<style>
    body {
  background: url(/bg.png);
  background-color: black;
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}

.liquid-glass {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 32px;
  border-radius: 100px;
  /* Remove the standard border */
  border: none;
  background: rgba(255, 255, 255, 0);

  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);

  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.08),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.4);

  color: #ffffff;
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

/* The Gradient Border */
.liquid-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 100px;
  padding: 1px; /* This defines the border thickness */
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    rgba(255, 255, 255, 0.05) 70%,
    rgba(255, 255, 255, 0.5) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-2px);
}

.logo {
  width: 28px;
  height: 28px;
  opacity: 0.9;
}
</style>