1 files changed, 64 insertions, 0 deletions
diff --git a/day9/task5_vue/src/components/AddNewEntryButton.vue b/day9/task5_vue/src/components/AddNewEntryButton.vue
new file mode 100644
index 0000000..fa52f8b
--- /dev/null
+++ b/day9/task5_vue/src/components/AddNewEntryButton.vue
@@ -0,0 +1,64 @@
+<template>
+    <button
+            @mouseenter="isHovered = true"
+            @mouseleave="isHovered = false"
+            @click="showCreateForm">
+        <div v-if="isHovered">Add new entry</div>
+        <div v-else>+</div>
+    </button>
+</template>
+
+<script>
+    import EditFormBox from "./EditFormBox.vue";
+
+    export default {
+        name: "AddNewEntryButton",
+        components: {EditFormBox},
+
+        data() {
+            return {
+                isHovered: false
+            }
+        },
+
+        methods: {
+            showCreateForm() {
+
+            }
+        }
+    }
+</script>
+
+<style scoped>
+    button {
+        overflow: hidden;
+        white-space: nowrap;
+
+        position: fixed;
+
+        padding: 5px;
+        border-radius: 50px;
+        width: 100px;
+        height: 100px;
+        border: none;
+        background-color: #2871e2;
+        color: white;
+        font-size: 45px;
+
+        transition-property: width;
+        transition-duration: 0.6s;
+
+        bottom: 50px;
+        left: 50px;
+    }
+
+    button:hover {
+        width: 300px;
+        font-size: 30px;
+        background-color: #286bd6;
+    }
+
+    button:focus {
+        background-color: #2861c3;
+    }
+</style>
+\ No newline at end of file