資料結構
網路
關係型資料庫管理系統
作業系統
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+ 瀏覽量
廣告