diff --git a/link_hover_effect/index.html b/link_hover_effect/index.html
new file mode 100644
index 0000000..df5f4aa
--- /dev/null
+++ b/link_hover_effect/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Link Background Hover Effect
+
+
+
+ Go to website
+
+
diff --git a/link_hover_effect/style.css b/link_hover_effect/style.css
new file mode 100644
index 0000000..3dea064
--- /dev/null
+++ b/link_hover_effect/style.css
@@ -0,0 +1,40 @@
+@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500&display=swap');
+* {
+ padding: 0;
+ margin: 0;
+}
+body {
+ background: #f5f6f8;
+ min-height: 100vh;
+ font-size: 14px;
+ font-family: 'Poppins', sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+.link {
+ text-decoration: none;
+ color: black;
+ font-size: 1.4em;
+ position: relative;
+ padding: 0 10px;
+ transition: 0.25s ease-in-out all;
+ font-weight: 300;
+}
+.link::before {
+ content: '';
+ position: absolute;
+ background: #ec3f7a;
+ width: 2px;
+ height: 100%;
+ left: 0;
+ transition: 0.2s ease-in-out all;
+ z-index: -1;
+}
+.link:hover::before {
+ width: 100%;
+}
+.link:hover {
+ color: #ffffff;
+ font-size: 1.6em;
+}