按钮悬停效果

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 41 课，共 43 课。

挑战

简单

HTML 中已经有一个按钮。你的目标是让用户将鼠标悬停在按钮上时，它稍微放大。在 CSS 中，为 .cta-button 设置样式，使其：

具有平滑的过渡效果 transition: transform 0.3s ease;。
悬停时，使用 transform: scale(1.05) 稍微放大。

亲手试试

<html>
<head>
  <title>Button Hover Effect</title>
  <style> 
    
    /* Add your styles here */
      .cta-button {
      background-color: #6a1b9a;
      color: white;
      padding: 12px 24px;
      border: none;
      border-radius: 8px;
      font-size: 1rem;
    }

  </style>
</head>
<body>
    <button class="cta-button">Click Me</button>
</body>
</html>