資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 CSS 更改按鈕的字型大小
要使用 CSS 更改 按鈕 的字型大小，我們將使用兩種不同的方法。在本文中，我們將瞭解如何使用 CSS 屬性更改按鈕的字型大小。
我們有三個不同的按鈕，我們的任務是更改代表按鈕的普通、較小和較大字型大小的按鈕的字型大小。
更改按鈕字型大小的方法
以下列出了使用 CSS 更改按鈕字型大小的方法，我們將在本文中逐步解釋並提供完整的示例程式碼進行討論。
使用 font-size 屬性更改字型大小
要更改按鈕的字型大小，我們將使用 CSS font-size 屬性，該屬性更改任何元素的字型大小。
- 我們使用了 text-align 屬性來居中文字，並使用 cursor 屬性在懸停在按鈕上時更改游標型別。
- 我們使用了 'font-size: 30px;' 來增加按鈕的字型大小。
- 我們使用了 'font-size: 10px;' 來減小按鈕的字型大小。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS 更改按鈕的字型大小。
<!DOCTYPE html>
<html>
<head>
<title>
Change the font size of a button with CSS
</title>
<style>
.all {
text-align: center;
cursor: pointer;
}
.button1 {
font-size: 30px;
}
.button2 {
font-size: 10px;
}
</style>
</head>
<body>
<h3>
Change the Font Size of a Button with CSS
</h3>
<p>
In this example we have used CSS font-size
property to change the font size of button
with CSS.
</p>
<button>Normal</button>
<button class="all button1">Larger Font</button>
<button class="all button2">Smaller Font</button>
</body>
</html>
使用 transform 屬性更改字型大小
要更改按鈕的字型大小，我們將使用 CSS transform 屬性，使用 scale() 值來調整任何元素的大小。
- 我們使用了 text-align 屬性來居中文字，margin 屬性來應用邊距，以及 cursor 屬性在懸停在按鈕上時更改游標型別。
- 我們使用了 'transform: scale(1.5);' 來增加按鈕的字型大小。
- 我們使用了 'transform: scale(0.8)' 來減小按鈕的字型大小。
示例
這是一個完整的示例程式碼，實現了上述步驟，使用 CSS 更改按鈕的字型大小。
<!DOCTYPE html>
<html>
<head>
<style>
.all {
text-align: center;
cursor: pointer;
margin: 5%;
}
.btn1 {
transform: scale(1.5);
}
.btn2 {
transform: scale(0.8);
}
</style>
</head>
<body>
<h3>
Change the Font Size of a Button with CSS
</h3>
<p>
In this example we have used CSS transform
property to change the font size of button
with CSS.
</p>
<button>Cick me </button>
<button class="all btn1">Larger</button>
<button class="all btn2">Smaller</button>
</body>
</html>
結論
使用 CSS 更改按鈕的字型大小是一個簡單的過程。在本文中，我們討論了兩種更改按鈕字型大小的方法，分別是使用 CSS font-size 和 transform scale() 值。
更新於： 2024年8月6日
22K+ 瀏覽量
廣告