diff --git a/resources/assets/js/components/likebutton.js b/resources/assets/js/components/likebutton.js
index 650f880e29..e60777bd8d 100644
--- a/resources/assets/js/components/likebutton.js
+++ b/resources/assets/js/components/likebutton.js
@@ -20,7 +20,7 @@ $(document).ready(function() {
       var heart = el.find('.status-heart');
 
       if(likes.indexOf(id) != -1) {
-        heart.removeClass('far fa-heart').addClass('fas fa-heart');
+        heart.removeClass('far fa-heart').addClass('fas fa-heart liked');
       }
     });
   };
@@ -40,14 +40,14 @@ $(document).ready(function() {
       var heart = el.find('.status-heart');
 
       if(likes.indexOf(id) > -1) {
-        heart.removeClass('fas fa-heart').addClass('far fa-heart');
+        heart.removeClass('fas fa-heart liked').addClass('far fa-heart');
         likes = likes.filter(function(item) { 
             return item !== id
         });
         counter.text(count);
         action = 'unlike';
       } else {
-        heart.removeClass('far fa-heart').addClass('fas fa-heart');
+        heart.removeClass('far fa-heart').addClass('fas fa-heart liked');
         likes.push(id);
         counter.text(count);
         action = 'like';
@@ -57,4 +57,4 @@ $(document).ready(function() {
       console.log(action + ' - ' + id + ' like event');
     });
   });
-});
\ No newline at end of file
+});
diff --git a/resources/assets/sass/custom.scss b/resources/assets/sass/custom.scss
index 551d2571f3..a7d8d5de3e 100644
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@@ -205,6 +205,45 @@ body, button, input, textarea {
   animation: loading-bar 3s linear infinite;
 }
 
+.liked {
+    position: relative;
+    z-index: 1;
+}
+
+.liked::after {
+    content: "\F0a3";
+    color: transparent;
+    animation: liking 1.5s;
+    position: absolute;
+    z-index: -1;
+    left: 50%;
+    top: 0;
+}
+
+@keyframes liking {
+ 0% {
+  -webkit-transform:rotate(0deg);
+  transform:rotate(0deg);
+  font-size:0;
+  top: .25rem;
+  color: #ebf70e;
+ }
+ 75% {
+  -webkit-transform:rotate(1turn);
+  transform:rotate(1turn);
+  top: -0.55rem;
+  font-size: 2.8rem;
+  opacity:1;
+  left: -0.55rem;
+ }
+ 100% {
+  transform:rotate(1turn);
+  top: 2.5rem;
+  left: 0em;
+  font-size:0;
+  left: 0.9rem
+ }
+
 .max-hide-overflow {
   max-height: 500px;
   overflow-y: hidden;