Hi,
Please help me on how to show notification using HTML, CSS and JavaScript?
Example: Notification showing an Android phone.
Hi makenzi.exc,
Refer below example.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> body { font-family: Arial; font-size: 10pt; } </style> </head> <body> <style type="text/css"> .animated-button { position: relative; background-color: mediumpurple; color: white; border: none; padding: 10px 20px; font-size: 14px; cursor: pointer; border-radius: 5px; animation: pulse 1s infinite alternate; } .animated-button:hover { background-color: mediumvioletred; } .badge { position: absolute; top: 0; right: 0; background-color: darkred; color: white; font-size: 10px; padding: 3px 6px; border-radius: 50%; } @keyframes pulse { from { transform: scale(1); } to { transform: scale(1.1); } } </style> <button type="button" class="animated-button"> Message <span class="badge">4</span> </button> </body> </html>
Demo
Screenshot
Downloads
Download Sample
© COPYRIGHT 2025 ASPSnippets.com ALL RIGHTS RESERVED.