Added link hover effect

Mominsami07 · Feb 9, 2020 · 107cab7 · 107cab7
1 parent 2a2e770
commit 107cab7
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 0 deletions.
diff --git a/link_hover_effect/index.html b/link_hover_effect/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Link Background Hover Effect</title>
+		<link rel="stylesheet" href="./style.css" />
+	</head>
+	<body>
+		<a href="#" class="link">Go to website</a>
+	</body>
+</html>
diff --git a/link_hover_effect/style.css 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;
+}