Skip to main content

Notification Bell Icon Ripple Animation | Html And Css

by Rustcode
Notification-Bell-Icon-Ripple-Animation-Using-Html-And-Css

Notification Bell Icon Ripple Animation Using Html And Css

How to create a notification bell icon ripple animation using HTML and CSS. In this tutorial, we will create a notification bell icon that when hovered, the icon will ripple.

This article is for beginners who want to learn css animation properties very well. We create this by just using html and css, there is no javascript just simple html, css. You can add this effect on the bell icon when the user clicks on it, you have to add just one class(ripple class which contains ripple animation) with the help of javascript when the user clicks on that bell icon. This animation has an easy css effect. You can find this animation in the youtube bell icon.

We have another "Cart Notification Icon Animation Using Html Css Only" you visit that also. Apart from this, we have a number of articles on button animations, you can check out that playlist also.

You can read more about web development from this playlist.

 

Table Of Contents

 

 

HTML:

Let's start with the boilerplate of the HTML document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Notification Bell Icon Ripple Animation | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 Body Content 

</body>
</html>


Let's include "remixicon" icon file link using CDN link. (remixicon is an open-source icon library that provides various icons free of cost. It is similar to "font-awesome" but font-awesome does not provide all icons free of cost.)

https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css


It time to inlcude all the body content in the html document.

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 <title>Notification Bell Icon Ripple Animation | Rustcode</title>
</head>
<body>

<div class="pulse">
  <i class="ri-notification-2-fill bell"></i>
</div>

</body>
</html>

 

 

Read Also:

  1. Next Button Design | Html And Css
  2. Notification Card Design | Html And Css

 

 

CSS:

.pulse{
  height: 50px;
  width: 50px;
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(#8A82FB, #407ED7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: whitesmoke;
}

.pulse::after,
.pluse::before{
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: #8A82FB;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.7;
}

.pulse::before{
  animation: pulse 2s ease-out infinite;
}

.pulse::after{
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  100%{
    transform: scale(2);
    opacity: 0;
  }
}

.bell{
  animation: shake 0.1s ease-out 5;
}

@keyframes shake {
  0%{
    transform: translateX(0px);
  }
  25%{
    transform: translateX(-4px);
  }
  50%{
    transform: translateX(0px);
  }
  75%{
    transform: translateX(4px);
  }
  100%{
    transform: translateX(0px);
  }
}

 

 

Read Also:

  1. Neumorphic Checkbox Button design | HTML And CSS
  2. Neumorphic Radio Button design | HTML And CSS
  3. Neumorphic Toggle Switch Button design | HTML And CSS

 

 

Output:

Notification-Bell-Icon-Ripple-Animation-Using-Html-And-Css-Output

 

 

Read Also:

  1. Bookmark Interaction Animation | Html Css And Gsap
  2. Cursor Animation With Hover Effect Using GSAP | HTML, CSS And GSAP

 

 

Youtube Video:

We also made a youtube video for "Notification Bell Icon Ripple Animation Using Html And Css", if you want to watch and want to learn every step of this design.

 

 

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

 

 

Read Also:

  1. 404 Error Page Design | HTML, CSS And Bootstrap
  2. Adding Input Dynamically To Form | HTML, CSS And jQuery
  3. Alert Strip Design | Html, Css And Javascript
  4. Animated Search Box Design | Html Css Only
  5. Announcement Popup Box Using PopboxJs | Html And Css
  6. Attractive Profile Card Design | Html And Css
  7. Beautiful Modal Box Animation | Html And Css

 

Comments

Post a Comment