先上效果
🌟 在网页设计中，按钮不仅是用户交互的重要元素，也是展示设计创意的平台。常用按钮动画效果能够显著提高用户界面的吸引力和互动性，为用户带来更加丰富和愉悦的体验。
完整代码
以下是完整代码：
HTML:
<div class="container"> <div class="hover-effect-1">效果1</div> <div class="hover-effect-2">效果2</div> <div class="hover-effect-3">效果3</div> <div class="hover-effect-4">效果4</div> <div class="hover-effect-5">效果5</div> </div>
CSS代码
body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f5f5f5; font-family: Arial, sans-serif; } .container { display: flex; flex-direction: row; gap: 20px; } .container>div { width: 200px; height: 100px; display: flex; justify-content: center; align-items: center; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; color: white; font-size: 18px; } .hover-effect-1 { background-color: #3498db; } .hover-effect-1:hover { transform: scale(1.1); } .hover-effect-2 { background-color: #e74c3c; } .hover-effect-2:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8); } .hover-effect-3 { background-color: #2ecc71; } .hover-effect-3:hover { background-color: #27ae60; } .hover-effect-4 { background-color: #f39c12; } .hover-effect-4:hover { transform: rotate(10deg); } .hover-effect-5 { background-color: #9b59b6; position: relative; overflow: hidden; } .hover-effect-5::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.2); transition: all 0.3s; } .hover-effect-5:hover::before { left: 100%; }
