How to create beautiful notification button.

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}

.notification {
background-color: #3128c2;
color: white;
text-decoration: none;
padding: 15px 26px;
position: relative;
display: inline-block;
border-radius: 2px;
margin: 0px 15px;
}

.notification:nth-child(even) {
background: red;
}

.notification:hover {
background: red;
}

.notification .badge {
position: absolute;
top: -10px;
right: -10px;
padding: 5px 10px;
border-radius: 50%;
background-color: #ad943b;
color: white;
font-weight: bold;
}
</style>
</head>

<body>

<h1>Beautiful Notification Button ❤</h1>

<a href="#" class="notification">
<span>Inbox</span>
<span class="badge">3</span>
</a>
<a href="#" class="notification">
<span>Inbox</span>
<span class="badge">2</span>
</a>
<a href="#" class="notification">
<span>Inbox</span>
<span class="badge">1</span>
</a>
<a href="#" class="notification">
<span>Inbox</span>
<span class="badge">0</span>
</a>

</body>

</html>

Comments

Post a Comment