在网页界面中，按钮是最基础也最常用的交互元素。通过CSS悬停状态改变按钮内文字大小，可以让操作反馈更生动。下面介绍如何使用HTML5标签配合CSS实现文字缩小的悬停按钮动画。
基础HTML结构
我们使用一个普通的<button>标签，内部放置需要缩小的文字。结构越简单越容易控制样式。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>悬停文字缩小按钮</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<button class="shrink-btn">
<span class="btn-text">立即体验</span>
</button>
</body>
</html>
CSS动画样式写法
给按钮和内部文字都加上transition，当鼠标移入时改变文字的font-size，同时可微调按钮内边距保持居中。
.shrink-btn {
padding: 12px 24px;
font-size: 16px;
background-color: #4a90e2;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.shrink-btn .btn-text {
display: inline-block;
transition: font-size 0.3s ease;
}
.shrink-btn:hover {
background-color: #357abd;
}
.shrink-btn:hover .btn-text {
font-size: 12px;
}
关键点说明
- 使用
transition属性让字体变化平滑，不会出现瞬间跳变。 - 文字缩小后按钮高度可能变化，可用固定高度或调整padding缓解。
- 若文字使用<span>包裹，缩放控制更灵活。
使用JavaScript增强（可选）
如果需要在悬停时做更多逻辑，可用JS监听事件，但纯展示动画不必须。
const btn = document.querySelector('.shrink-btn');
btn.addEventListener('mouseenter', () => {
console.log('按钮被悬停');
});
小结
带文字缩小的悬停HTML5按钮动画主要依赖CSS的hover与transition，代码量少且兼容性良好。按上面示例修改颜色和尺寸即可适配不同风格页面。
HTML5CSS_animationbutton_hover修改时间：2026-07-27 14:24:20