数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告