数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物
数学
英语
经济学
心理学
社会科学
时尚研究
法律研究如何使用 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;
}
圆形按钮
形状使用 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 样式化圆形按钮的代码 −
<!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 浏览量
广告