use and button

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>
 }

packages/app/src/components/FollowButton/index.less

@@ -15,22 +15,26 @@
     }
 
     .btn {
+        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-top: 0;
+        border-right: 0;
+        border-bottom: 0;
 
         text-align: center;
         letter-spacing: 1px;
 
         span {
+            user-select: none !important;
             transition: all 150ms ease-in-out;
             color: white !important;
-
         }
 
         opacity: 0.9;
@@ -43,6 +47,14 @@
             opacity: 1;
 
             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 {