Button Hover Effect
transition aur :hover pseudo-class se smooth interactive button state banao.
Working code
<a class="button" href="#">Start Learning</a>
<style>
.button {
display: inline-block;
padding: 12px 18px;
color: white;
background: #0b73ce;
border-radius: 10px;
text-decoration: none;
transition: transform 180ms ease, background 180ms ease;
}
.button:hover {
background: #095fa9;
transform: translateY(-2px);
}
.button:focus-visible {
outline: 3px solid #9bd2ff;
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
.button { transition: none; }
}
</style>Preview
How it works
:hover pointer interaction par style change karta hai aur transition change ko smooth banata hai.
:focus-visible keyboard focus ko visible rakhta hai. Reduced-motion preference par transition remove ki gayi hai.
Try Yourself
<a class="button" href="#">Start Learning</a>
<style>
.button {
display: inline-block;
padding: 14px 22px;
background: #222;
color: white;
transition: transform 200ms ease;
}
.button:hover { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.button { transition: none; }
}
</style>