如何使用 CSS 样式化圆形按钮？

要在圆形按钮中，border-radius 属性发挥了关键作用。将其设置为 50%，圆形按钮就完成了。它将形状转换为圆形。要设置多个按钮，请使用值为 block 的 display 属性。这将安排它们。此外，如果你想在 hover 时更改样式，请使用 :hover 选择器。让我们看看如何使用 HTML 和 CSS 样式化圆形按钮。

创建按钮形状

使用 <a> 元素创建链接，并使它看起来像按钮 −

<a href="#" class="btn1">50%</a>
<a href="#" class="btn2">50%</a>

文本修饰无

为了避免链接产生下划线（因为我们需要将其塑造成圆形按钮），所以将 text-decoration 属性设置为 none −

a {
   text-decoration: none;
   display: inline-block;
   padding: 18px;
   font-size: 35px;
   width: 60px;
   height: 60px;
   text-align: center;
}

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

圆形按钮

形状使用 border-radius 属性更改为圆形 −

.btn1 {
   border-radius: 50%;
   background-color: #acacac;
   color: black;
}
.btn2 {
   border-radius: 50%;
   background-color: rgb(68, 30, 112);
   color: white;
}

使圆形按钮悬停

使用 :hover 选择器使圆形按钮悬停。悬停时会更改背景和文本颜色 −

.btn1:hover {
   background-color: #ddd;
   color: black;
}
.btn2:hover {
   background-color: rgb(121, 37, 133);
   color: white;
}

示例

以下是使用 CSS 样式化圆形按钮的代码 −

Open Compiler
<!DOCTYPE html>
<html>
<head>
   <style>
      a {
         text-decoration: none;
         display: inline-block;
         padding: 18px;
         font-size: 35px;
         width: 60px;
         height: 60px;
         text-align: center;
      }
      .btn1:hover {
         background-color: #ddd;
         color: black;
      }
      .btn2:hover {
         background-color: rgb(121, 37, 133);
         color: white;
      }
      .btn1 {
         border-radius: 50%;
         background-color: #acacac;
         color: black;
      }
      .btn2 {
         border-radius: 50%;
         background-color: rgb(68, 30, 112);
         color: white;
      }
   </style>
</head>
<body>
   <h1>Style round Button Example</h1>
   <a href="#" class="btn1">50%</a>
   <a href="#" class="btn2">50%</a>
</body>
</html>

更新于：2023-12-21

506 浏览量

你的职业生涯从这里开始

完成课程以获得认证

开始
广告