🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

CSS模板：圆角按钮（border-radius + background）

📝 使用场景

当你想为用户提供一个醒目且美观的操作按钮时，此模板非常适用。对于初学者来说也很容易上手。

📘 说明

这个CSS代码使用 border-radius 设置圆角，用 background-color 设置背景色。可应用于提交按钮、链接按钮等多种用途。

🔹 部分代码

<button class="rounded-button">点击这里</button>

<style>
  .rounded-button {
    background-color: #28a745;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    cursor: pointer;
  }
</style>

🔸 完整 HTML 代码

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>圆角按钮</title>
  <link rel="stylesheet" href="/assets/css/template-common.css?v=1">
  <style>
    .rounded-button {
      background-color: #28a745;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="rounded-button">点击这里</button>
</body>
</html>
已复制！

🎯 圆角按钮的设计应用技巧

圆角按钮是现代UI设计的基本元素。使用 border-radius 的这一简单技巧，能大幅提升用户界面的易用性。

🌈 自定义要点

通过调整 border-radius 的数值，可以显著改变按钮的视觉效果。小约 5px 的数值适合商务风格，而较大的如 25px 则给人更亲切的感觉。要制作完全圆形的按钮，可以设置为 50%。背景色可根据需求更改，例如 #28a745（绿色）、#007bff（蓝色）或 #dc3545（红色）。

✨ 添加交互效果

为基本按钮添加 :hover 和 :active 样式，使UI更具交互性。例如，.rounded-button:hover { background-color: #218838; transform: scale(1.05); } 可在悬停时使按钮颜色变深并略微放大。添加 transition 属性可使这些变化更加平滑。

📱 响应式设计技巧

在移动设备上，增大按钮的 padding（如 15px 30px）可方便用户点击。建议使用媒体查询，如 @media (max-width: 768px) { .rounded-button { padding: 15px 30px; } } 进行调整。字体大小也可以根据屏幕宽度变化。

圆角按钮是简单但有效的UI元素，但在单页中过度使用可能导致其视觉效果减弱。建议限制其使用于关键操作按钮或真正重要的元素上。

相关模板