diff --git a/style.css b/style.css
index 935e543..d0a9157 100644
--- a/style.css
+++ b/style.css
@@ -7,6 +7,13 @@ html, body {
     background: #f5f5f5;
 }
 
+h1 {
+    margin: 25px 0;
+    font-size: 30px;
+    font-weight: 300;
+    text-align: center;
+}
+
 a {
     position: relative;
     display: inline-block;
@@ -14,13 +21,44 @@ a {
     text-transform: uppercase;
     letter-spacing: 1px;
     outline: none;
+    font-weight: 300;
 }
 
-.effect-2 {
+div[class^="effect-"] {
     width: 400px;
-    margin: 100px auto;
+    margin: 0 auto;
     padding: 30px 0;
-    text-align: center;
+    text-align: center;    
+}
+
+.effect-1 {
+    background-color: #f19f0f;
+}
+
+.effect-1 a {
+	padding: 6px 0 8px;
+	color: #fff;
+}
+
+.effect-1 a::after {
+    content: '';
+	position: absolute;
+	top: 100%;
+	left: 0;
+	width: 100%;
+	height: 4px;
+	background: rgba(0,0,0,0.1);	
+	transform: translateY(10px);
+	opacity: 0;
+	transition: opacity 0.3s, transform 0.3s;
+}
+
+.effect-1 a:hover::after {
+	opacity: 1;
+	transform: translateY(0px);
+}
+
+.effect-2 {
     background-color: #435a6b;
 }
 
@@ -29,7 +67,6 @@ a {
 	height: 45px;
 	line-height: 45px;
 	color: #fff;
-	font-weight: 300;
 }
 
 .effect-2 a::before,
@@ -57,19 +94,78 @@ a {
 	transform-origin: 100% 100%;
 }
 
-.effect-2 a:hover::before,
+.effect-2 a:hover::before {
+    opacity: 1;
+	left: 50%;
+	transform: rotate(0deg) translateX(-50%);
+}
+
 .effect-2 a:hover::after {
-    opacity:1;
+    opacity: 1;
+	right: 50%;
+	transform: rotate(0deg) translateX(50%);
+}
 
+.effect-3 {
+    background-color: #2ac56c;
 }
 
-.effect-2 a:hover::before {
-    left: 50%;
-    transform:rotate(0deg) translateX(-50%);
-    
+.effect-3 a {
+	color: rgba(0,0,0,0.2);
+	font-weight: bold;
 }
 
-.effect-2 a:hover::after {
-    right: 50%;
-    transform:rotate(0deg) translateX(50%);
+.effect-3 a::before {
+    content: attr(data-hover);
+    position: absolute;
+	color: #fff;	
+	transition: transform 0.3s, opacity 0.3s;
+}
+
+.effect-3 a:hover::before {
+    transform: scale(0.9);
+	opacity: 0;
+}
+
+.effect-4 {
+    background-color: #3fa46a;    
+}
+
+.effect-4 a {
+	padding: 8px;
+	color: #237546;
+	font-weight: bold;
+}
+
+.effect-4 a:hover {
+	color: #fff;
+	transition: color 0.3s;
+}
+
+.effect-4 a::before,
+.effect-4 a::after {
+    content: '';
+	position: absolute;
+	left: 0;
+	width: 100%;
+	height: 2px;
+	background: #fff;
+	opacity: 0;
+	transition: opacity 0.3s, transform 0.3s;
+}
+
+.effect-4 a::before {
+	top: 0;
+	transform: translateY(-10px);
+}
+
+.effect-4 a::after {
+	bottom: 0;
+	transform: translateY(10px);
+}
+
+.effect-4 a:hover::before,
+.effect-4 a:hover::after {
+    opacity: 1;
+    transform: translateY(0px);
 }