HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>SVG hover with CSS</title>

  <style>

    body { font-family: system-ui, sans-serif; padding: 1.5rem; }

    .btn-icon { fill: #64748b; transition: fill 0.2s; cursor: pointer; }

    .btn-icon:hover { fill: #2563eb; }

  </style>

</head>

<body>

  <h1>Hover effect</h1>

  <p>Hover over the circle to see the fill transition.</p>



  <svg width="48" height="48" xmlns="http://www.w3.org/2000/svg">

    <circle class="btn-icon" cx="24" cy="24" r="20"/>

  </svg>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Introduction — Hover Effect with CSS