如何使用CSS制作类似tiny.cloud站点的精美按钮及hover效果

你要的这款按钮属于常见的渐变悬浮风格按钮，只需要基础CSS就能实现，我把可直接复用的代码和新手友好的知识点解释都整理好了：

可直接复制的完整代码 #

HTML部分 #

<button class="gradient-btn">示例按钮</button>

CSS部分 #

/* 按钮基础样式 */
.gradient-btn {
  /* 文字配置 */
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  border: none;
  /* 尺寸配置 */
  padding: 10px 24px;
  border-radius: 6px;
  /* 渐变背景，和你参考的按钮配色一致 */
  background: linear-gradient(135deg, #4287ff 0%, #625cff 100%);
  /* 阴影做立体效果 */
  box-shadow: 0 2px 7px rgba(98, 92, 255, 0.35);
  /* 交互配置 */
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

/* hover悬浮效果 */
.gradient-btn:hover {
  /* 背景稍微提亮 */
  background: linear-gradient(135deg, #5797ff 0%, #7772ff 100%);
  /* 阴影加大强化悬浮感 */
  box-shadow: 0 4px 12px rgba(98, 92, 255, 0.45);
  /* 轻微上移，模拟上浮效果 */
  transform: translateY(-1px);
}

/* 点击按压效果，可选添加 */
.gradient-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(98, 92, 255, 0.3);
}

新手易懂的核心属性说明 #

• linear-gradient()：用来实现背景的渐变色效果，你可以修改括号里的色值自定义按钮配色
• transition：控制属性变化的过渡时长，加了这个之后hover不会出现生硬的跳转效果，所有变化都会平滑过渡
• box-shadow + transform：两个属性配合就能低成本做出立体悬浮感，不需要复杂的图层设置

内容的提问来源于stack exchange，提问作者Ashutosh kumar