The cursor property in CSS controls the type of cursor
that appears when the user hovers over an element. By setting cursor: pointer;,
you can change the default cursor (usually an arrow) to a hand icon, which
visually indicates to users that the element can be clicked. This is commonly
used for buttons, links, and any other interactive elements on a webpage.
cursor-pointer.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Cursor Pointer Example</title> <style> body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; background-color: #f0f0f0; } /* Button Styles */ .btn { background-color: #6164bc; color: white; border: none; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 15px; } .btnWithCursor { cursor: pointer; /* Changes cursor to pointer */ } </style> </head> <body> <h1>Interactive Elements Example</h1> <button class="btnWithCursor btn">Cursor styled</button> <button class="btn">Regular One</button> </body> </html>
Open the above page in browser you will see below screen.
Hover the mouse on ‘Cursor styled’ button, you can see hand icon symbol there.
No comments:
Post a Comment