Links and buttons are where users interact with your site, so they deserve good styling. A well-styled button invites clicks; a good link is obvious without being ugly.
Styling links and their states
Links have states you can style: normal, <code>:hover</code> (mouse over), <code>:focus</code> (keyboard focus) and <code>:visited</code>. Always style hover and focus so links feel responsive and stay accessible.
<a href="#" class="link">Hover or tab to me</a>.link{color:#2563eb;text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}
.link:focus-visible{outline:2px solid #2563eb;outline-offset:2px}Building a button
A button is just padding, a background, rounded corners and a hover state. Make a reusable <code>.btn</code> class and you can use it anywhere.
<button class="btn">Click me</button>.btn{background:#2563eb;color:#fff;border:0;padding:11px 20px;border-radius:10px;font-size:1rem;cursor:pointer;transition:background .15s}
.btn:hover{background:#1e40af}Smooth transitions
The <code>transition</code> property makes hover changes animate smoothly instead of snapping. Even a 150ms transition makes buttons feel polished.
.btn:focus { outline: none; }.btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }Removing focus outlines entirely (outline: none) breaks keyboard accessibility. Replace it with a visible :focus-visible style instead.
Give interactive elements a cursor: pointer, a clear hover state and a visible focus state. Make tap targets at least 44px tall for mobile.
Build a button with padding, a background, rounded corners, a hover colour change and a smooth transition. Add a focus-visible outline for keyboard users.
1. Which pseudo-class styles mouse-over?
2. What animates hover changes smoothly?
3. Why keep a visible focus state?
- Style link states: normal, :hover, :focus-visible, :visited.
- A button is padding + background + radius + hover.
- transition makes hover changes smooth.
- Never remove focus outlines without a visible replacement.