ボタンのホバーエフェクト
CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 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>