資料結構
網路
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+ 瀏覽量
廣告