diff --git a/packages/app/src/components/FollowButton/index.jsx b/packages/app/src/components/FollowButton/index.jsx
index 3cdcd1cd..76e9d891 100644
--- a/packages/app/src/components/FollowButton/index.jsx
+++ b/packages/app/src/components/FollowButton/index.jsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Button } from "antd"
 import classnames from "classnames"
 
 import "./index.less"
@@ -8,13 +9,15 @@ export default (props) => {
         <div className="counter">
             {props.count}
         </div>
-        <div
+        <Button
+            type="ghost"
             onClick={props.onClick}
             className={classnames(
                 "btn",
                 { ["followed"]: props.followed }
-            )}>
+            )}
+        >
             <span>{props.followed ? "Following" : "Follow"}</span>
-        </div>
+        </Button>
     </div>
 }
diff --git a/packages/app/src/components/FollowButton/index.less b/packages/app/src/components/FollowButton/index.less
index 063b1b96..17ae8118 100644
--- a/packages/app/src/components/FollowButton/index.less
+++ b/packages/app/src/components/FollowButton/index.less
@@ -1,12 +1,12 @@
 @borderRadius: 8px;
 
 .followButton {
-    display       : inline-flex;
+    display: inline-flex;
     flex-direction: row;
-    align-items   : center;
+    align-items: center;
 
     transition: all 150ms ease-in-out;
-    outline   : 1px solid var(--border-color);
+    outline: 1px solid var(--border-color);
 
     border-radius: @borderRadius;
 
@@ -15,34 +15,46 @@
     }
 
     .btn {
-        width  : 100px;
+        cursor: pointer;
+
+        width: 100px;
         padding: 5px 15px;
 
-        cursor    : pointer;
         transition: all 150ms ease-in-out;
 
         border-radius: @borderRadius;
-        border-left  : 1.5px solid var(--border-color);
+        border-left: 1.5px solid var(--border-color);
+        border-top: 0;
+        border-right: 0;
+        border-bottom: 0;
 
-        text-align    : center;
+        text-align: center;
         letter-spacing: 1px;
 
         span {
+            user-select: none !important;
             transition: all 150ms ease-in-out;
             color: white !important;
-
         }
 
         opacity: 0.9;
 
-        background         : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
-        background-size    : 400% 400%;
+        background : linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
+        background-size : 400% 400%;
         background-position: 14% 0%;
 
         &:hover {
             opacity: 1;
 
-            animation : gradientMove 2s forwards ease-in-out infinite;
+            animation: gradientMove 2s forwards ease-in-out infinite;
+            background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
+            background-size: 400% 400%;
+            background-position: 14% 0%;
+        }
+
+        // make an click animation transforming size
+        &:active {
+            transform: scale(0.95);
         }
 
         &.followed {