jonasermert · October 29, 2021 22:58 · Oct 29, 2021
diff --git a/hover-button-animation-with-transition-2.markdown b/hover-button-animation-with-transition-2.markdown
@@ -0,0 +1,7 @@
+hover button animation with transition #2
+-----------------------------------------
+
+
+A [Pen](https://codepen.io/supercode7000/pen/KKzPmVW) by [supercode7000](https://codepen.io/supercode7000) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/supercode7000/pen/KKzPmVW/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,2 @@
+
+<a id="btn" href="#">hover me!</a>
diff --git a/style.css b/style.css
@@ -0,0 +1,65 @@
+
+  *{padding: 0;
+	margin: 0;
+	text-decoration: none;
+	list-style: none;
+
+   }
+
+body{
+
+   	height: 20vh;
+ padding: 200px;
+
+
+}
+	#btn{
+		border: 2px solid black;
+		padding: 30px 60px;
+		color: black;
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+		font-size: 24px;
+		font-family: sans-serif;
+		transition: all .5s;
+		}
+
+	#btn:before{
+			width: 100%;
+			height: 100%;
+			content: '';
+			margin: auto;
+			position: absolute;
+			top:  -100%;
+			left: -100%;
+			background: #212121;
+			transition: all .5s;
+			z-index: -1;
+
+		}
+	/**#btn:after{
+			width: 100%;
+			height: 100%;
+			content: '';
+			margin: auto;
+			position: absolute;
+			top:  100%;
+			left: 100%;
+			background: #212121;
+			transition: all .5s;
+			z-index: -1;
+			
+	}**/
+	#btn:hover{
+		color: white;
+	}
+	#btn:hover:before{			
+			top: 0;
+			left: 0;
+
+	}/**
+	#btn:hover:after{
+			transform: rotateY(90deg);
+
+	}**/