Four effects you will use constantly. Each uses a transition on transform, opacity or color.
1. A button that fills
index.html
HTML
<style>
.btn { display: inline-block; padding: 10px 22px; border: 2px solid #d94a00; color: #d94a00; text-decoration: none; border-radius: 6px; transition: background-color .2s, color .2s; }
.btn:hover, .btn:focus-visible { background: #d94a00; color: #fff; }
</style>
<a class="btn" href="#">Read more</a>2. A card that lifts
index.html
HTML
<style>
.card { width: 220px; padding: 14px; border: 1px solid #e6ddd7; border-radius: 10px; background: #fff; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0,0,0,.15); }
</style>
<div class="card"><b>The Slow Garden</b><p>Hover to lift.</p></div>3. An image zoom inside a frame
index.html
HTML
<style>
.frame { width: 220px; height: 130px; overflow: hidden; border-radius: 10px; }
.frame div { width: 100%; height: 100%; background: linear-gradient(135deg, #1a5276, #d94a00); transition: transform .5s; }
.frame:hover div { transform: scale(1.12); }
</style>
<div class="frame"><div></div></div>The frame’s overflow: hidden clips the zoom so the picture grows without leaving the box.
4. An arrow that moves
index.html
HTML
<style>
.more { text-decoration: none; color: #1a5276; font-weight: 600; }
.more span { display: inline-block; transition: transform .2s; }
.more:hover span, .more:focus-visible span { transform: translateX(6px); }
</style>
<a class="more" href="#">Continue <span>→</span></a>Rules to keep them good
- Style
:focus-visiblealong with:hover, so keyboard users get the same feedback. - Keep the movement small: a few pixels.
- For people who prefer less motion, reduce or remove it:
style.css
CSS
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; }
}Reduced motion is explained in Reduced Motion.
Exercise: a growing icon
Make a .icon scale to 1.2 times its size on hover, over a quarter of a second.
Show a possible solution
style.css
CSS
.icon { transition: transform 0.25s; }
.icon:hover { transform: scale(1.2); }