css按钮动态变大 |css中float不起作用

.btn {
width: 150px;
height: 50px;
font-size: 16px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #007bff;
transition: all 0.3s ease-in-out;
}
.btn:hover {
transform: scale(1.1);
}

上述代码中，.btn类定义了按钮的基本样式，包括宽度、高度、字体大小、边框、圆角、文字颜色和背景颜色等，同时定义了一个用于动画效果的transition属性。

在:hover伪类中，通过transform属性对按钮进行放大操作，其中scale(1.1)表示将按钮的大小按照比例增加10%，从而实现按钮动态变大的效果。

需要注意的是，使用CSS按钮动态变大时应考虑不同浏览器的兼容性，同时也要保持按钮样式的统一性，避免出现过多的样式变化影响用户体验。