📝 代码查看
使用runcode.html页面

1
查看次数
2025-11-07
创建时间
2025-11-07
最后更新
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'>
<div class="flex flex-col space-y-4">
  <span class="btn btn-primary btn-round inline-flex">
    <span class="font-bold text-grad">Shine Button 1</span>
  </span>
  <span class="btn btn-info btn-round btn-depth inline-flex">
    <span class="font-bold">Shine Button 2</span>
  </span>
</div>

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: var(--blue-color-1);
}

:root {
  --blue-color-1: #08123d;
  --gold-color-1: #dcb687;
  --brown-color-1: #50301f;
  --brown-color-2: #936237;
  --gold-grad-1: radial-gradient(
      circle at 50% 5%,
      rgba(255, 255, 255, 0.5),
      #eba262
    ),
    #eba262;
  --gold-grad-2: linear-gradient(88deg, #e7924e 0%, #f8ffee 50%, #e7924e 100%);
  --blue-grad-1: radial-gradient(
      circle at 50% 5%,
      rgba(255, 255, 255, 0.2),
      #091344
    ),
    #091344;
  --primary-color: var(--blue-grad-1);
  --info-color: var(--gold-grad-1);
}

.btn-primary {
  border: 4px solid var(--gold-color-1);
}
.btn-primary span {
  background-image: var(--gold-grad-2);
}
.btn-info {
  color: var(--brown-color-1);
  border: none;
}
.btn-depth {
  box-shadow: 0 -5px 0 var(--brown-color-2);
}
暂无JavaScript代码

👁️ 实时预览