button with border done

src/components/Button.vue

@@ -1,16 +1,48 @@
 <template>
-    <div class="button-component flex">
+    <button class="button-component w-[80px] h-[32px] rounded-full
+        flex text-[#666666] border-[1px] border-[#666666]
+        justify-center items-center bg-[#FFFFFF]
+        hover:text-[#0099FF] hover:border-[#0099FF]
+        focus:text-[#0099FF] focus:border-[#0099FF]
+        cursor-pointer"
+        :class="{
+            'ring': isPressed,
+            'ring-[#0099FF]' : isPressed,
+            'ring-opacity-30': isPressed,
+        }"
+        @mousedown="onMousedown" @mouseup="onMouseup">
         {{ buttonText }}
-    </div>
+    </button>
 </template>
 
 <script>
+import { ref, } from 'vue';
+
 export default {
+    props: {
+        buttonText: {
+            type: String,
+            required: false,
+        },
+    },
     setup(props) {
         const buttonText = props.buttonText;
 
+        const isPressed = ref(false);
+
+        const onMousedown = () => {
+            isPressed.value = true;
+        }
+
+        const onMouseup = () => {
+            isPressed.value = false;
+        }
+
         return {
-            buttonText
+            buttonText,
+            onMousedown,
+            onMouseup,
+            isPressed,
         };
     },
 }