数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济
心理学
社会学
时尚
法律如何使用 CSS 创建药丸按钮？
药丸按钮是指药丸形状的按钮。我们可以轻松地设置和塑造默认按钮的样式，使其成为药丸按钮。设置按钮的 border-radius 属性，使其成为像药丸一样的形状。你还可以使用 border 属性和值 none 来移除边框。使用 text-align 属性和值 center 在中心对齐按钮的文本。
创建按钮
首先，使用 <button> 元素创建按钮 −
<button>Button 1</button> <button>Button 2</button> <div></div> <button>Button 3</button> <button>Button 4</button>
将按钮重塑为药丸按钮
使用下面的 CSS 样式将上面创建的按钮转换为药丸按钮。关键在于 border-radius 属性。使用 text-align 属性将按钮中的文本放在中心 −
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(193, 255, 236);
border: none;
color: rgb(0, 0, 0);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
font-size: 30px;
border-radius: 32px;
}
添加圆角
上面，我们设置了按钮的圆角，使其形成类似药丸的按钮。这是使用 border-radius 属性实现的 −
border-radius: 32px;
按钮文本
文本放在药丸按钮的中心 −
text-align: center;
示例
以下是创建药丸按钮的代码 −
<!DOCTYPE html>
<html>
<head>
<style>
button {
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
background-color: rgb(193, 255, 236);
border: none;
color: rgb(0, 0, 0);
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
font-size: 30px;
border-radius: 32px;
}
button:hover {
background-color: #9affe1;
}
</style>
</head>
<body>
<h1>Pill Buttons Example</h1>
<button>Button 1</button>
<button>Button 2</button>
<div></div>
<button>Button 3</button>
<button>Button 4</button>
</body>
</html>
更新于: 14-12-2023
2K+ 浏览量
广告