update: buttons

components/element/Button.vue

@@ -1,6 +1,6 @@
 <template>
 	<button
-		class="w-fit rounded-md p-2 font-bold transition-all duration-500 ease-out hover:px-4">
+		class="w-fit rounded-md p-2 font-bold transition-all duration-500 ease-out">
 		<slot />
 	</button>
 </template>

pages/notes/index.vue

@@ -4,11 +4,12 @@
 		<div class="flex w-full max-w-3xl justify-end gap-4">
 			<ElementButton
 				@click="userSignOut()"
-				class="hover:bg-red-500 hover:text-black">
+				class="group/button flex gap-2 align-middle hover:bg-red-500 hover:text-black">
 				<Icon name="fa6-solid:arrow-right-from-bracket" />
+				<p> Sign Out </p>
 			</ElementButton>
 			<ElementButton
-				class="hover:bg-blue-500 hover:text-black"
+				class="group/button flex gap-2 align-middle hover:bg-blue-500 hover:text-black"
 				@click="create()">
 				<Icon
 					v-if="isCreating"
@@ -16,6 +17,7 @@
 				<Icon
 					v-if="!isCreating"
 					name="fa6-solid:square-plus" />
+				<p> New Note </p>
 			</ElementButton>
 		</div>