19.按钮收缩动画 & 按钮增长动画 & 按钮摇摆动画 & 按钮边框动画

按钮收缩动画

在悬停时创建收缩动画。

• 使用适当的 transition 来为元素的变化设置动画。
• 使用 :hover 伪类将 transform 改为 scale(0.8),在用户悬停在元素上时缩小元素。

<button class="button-shrink">提交</button>

.button-shrink {
 color: #65b5f6;
 background-color: transparent;
 border: 1px solid #65b5f6;
 border-radius: 4px;
 padding: 0 16px;
 cursor: pointer;
 transition: all 0.3s ease-in-out;
}

.button-shrink:hover {
 transform: scale(0.8);
}

这个技巧使用 CSS 转换和过渡来创建一个简单但引人注目的悬停效果。以下是它的工作原理:

1. .button-shrink 类设置按钮的基本样式。它有一个透明的背景、一个蓝色的文本颜色和一个匹配的边框。border-radius 属性给按钮圆角,而 padding 在文本周围添加一些空间。cursor: pointer 确保当用户悬停在按钮上时显示正确的光标。

2. transition: all 0.3s ease-in-out