🌈 每日CSS一练：优雅按钮设计

<!-- 基础按钮结构 - 如同画布等待色彩的绽放 -->
<button class="elegant-btn">点击探索</button>

/* 🎨 主容器样式 - 为按钮铺设优雅的基调 */
.elegant-btn {
  padding: 12px 24px;          /* 舒适的呼吸空间 */
  border: none;                /* 去除默认边框 */
  border-radius: 30px;         /* 胶囊般的圆润触感 */
  font-size: 16px;             /* 恰到好处的阅读尺寸 */
  font-weight: 600;            /* 自信而不张扬的字重 */
  cursor: pointer;             /* 邀请互动的手指提示 */
  transition: all 0.3s ease;   /* 丝滑的过渡动画 */
  position: relative;          /* 为伪元素定位铺路 */
  overflow: hidden;            /* 隐藏溢出的特效 */
}

/* 🌟 静态样式 - 如深海般宁静的初始状态 */
.elegant-btn {
  background: linear-gradient(
    135deg, 
    #6e8efb 0%, 
    #4a6cf7 100%
  );                          /* 渐变色如海浪般流动 */
  color: white;               /* 纯净的文字色彩 */
  box-shadow: 0 4px 15px rgba(106, 108, 251, 0.4);
}                             /* 柔和的投影提升层次 */

/* ✨ 悬停特效 - 如同星光掠过水面 */
.elegant-btn:hover {
  transform: translateY(-3px); /* 轻盈的上浮效果 */
  box-shadow: 0 8px 25px rgba(106, 108, 251, 0.6);
}                             /* 扩大的光影交互 */

/* ⚡ 点击瞬间 - 迸发能量的脉冲效果 */
.elegant-btn:active {
  transform: translateY(1px);  /* 真实的按压反馈 */
}

/* 🌈 流光特效 - 用伪元素创造流动的光影 */
.elegant-btn::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -60%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.3) 50%,
    rgba(255,255,255,0) 100%
  );                          /* 半透明流光渐变 */
  transform: rotate(30deg);    /* 倾斜的动感角度 */
  transition: all 0.7s ease;   /* 缓慢的流光速度 */
}

/* 🚀 悬停时的流光动画 - 如彗星划过夜空 */
.elegant-btn:hover::after {
  left: 100%;                 /* 完成流光划过效果 */
}