پیشنمایش زنده
کد HTML
<div class="container fx-layer">
<div class="top">
<div class="box start-btn" style="--w: 260px;--h: 75px;--tr: 15%;">
<span class="text">Get started</span>
<div class="btn-icon">
<svg
class="svg"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M779.180132 473.232045 322.354755 16.406668c-21.413706-21.413706-56.121182-21.413706-77.534887 0-21.413706 21.413706-21.413706 56.122205 0 77.534887l418.057421 418.057421L244.819868 930.057421c-21.413706 21.413706-21.413706 56.122205 0 77.534887 10.706853 10.706853 24.759917 16.059767 38.767955 16.059767s28.061103-5.353938 38.767955-16.059767L779.180132 550.767955C800.593837 529.35425 800.593837 494.64575 779.180132 473.232045z"
></path>
</svg>
</div>
<div class="circle-overlay"></div>
</div>
</div>
</div>
کد CSS
.container {
display: flex;
flex-direction: column;
gap: 5rem;
.top {
display: flex;
gap: 5rem;
}
.bottom {
display: flex;
align-items: center;
gap: 2rem;
}
}
.fx-layer {
filter: contrast(3);
}
/* 通用类 */
.box {
--w: 100px;
--h: 100px;
--r: 9999px;
--tr: 25%;
z-index: 500;
position: relative;
width: var(--w);
height: var(--h);
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--r);
border: 1px double rgba(51, 51, 51, 0.08);
box-shadow:
inset 2px -2px 1px -1px rgba(255, 255, 255, 0.9),
inset -2px 2px 1px -1px rgba(255, 255, 255, 0.9),
inset 6px -6px 1px -6px rgba(255, 255, 255, 0.55),
inset -6px 6px 1px -6px rgba(255, 255, 255, 0.55),
inset 0 0 2px rgba(0, 0, 0, 0.8),
0 4px 8px rgba(0, 0, 0, 0.2);
background: rgba(0, 0, 0, 0.02);
backdrop-filter: blur(2px);
cursor: pointer;
filter: brightness(0.9);
.svg {
width: 28px;
filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.2));
}
.text {
filter: drop-shadow(0 25px 3px rgba(102, 102, 102, 0.15));
}
&:before {
content: "";
position: absolute;
z-index: 1;
top: 35%;
left: 50%;
transform: translateX(-50%);
width: calc(var(--w) - 16px);
height: calc(var(--h) - 16px);
border-radius: var(--r);
border: 1px solid rgba(0, 0, 0, 0.9);
filter: blur(8px);
}
&:after {
z-index: 501;
content: "";
position: absolute;
width: var(--w);
height: var(--h);
border-radius: var(--r);
filter: blur(7px);
background: linear-gradient(
45deg,
rgba(255, 255, 255, 0.8) 0%,
transparent var(--tr),
transparent calc(100% - var(--tr)),
rgba(255, 255, 255, 0.8) 100%
);
}
.circle-overlay {
position: absolute;
width: calc(var(--w) - 9px);
height: calc(var(--h) - 9px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--r);
filter: blur(1px);
}
}
.start-btn {
padding: 0 0.8rem;
display: flex;
align-items: center;
gap: 1rem;
transition: 0.25s;
.text {
font-size: 25px;
font-family: "微软雅黑", serif;
color: #3e3e3e;
}
.btn-icon {
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
background: #3e3e3e;
border-radius: 50%;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
transition: 0.25s;
.svg {
width: 16px;
fill: #f5f5f5;
}
}
&:hover {
background: rgba(0, 0, 0, 0);
transform: translateY(-3px);
.btn-icon {
transform: scale(1.1);
}
}
&:active {
transform: scale(0.94);
.text {
color: #000;
}
.btn-icon {
transform: scale(0.94);
}
}
}