btn swip with text effect

Author: saadman-galib

index.html

@@ -13,6 +13,7 @@
         <a href="#" class="button-1">Hover Me</a>
         <a href="#" class="button-2">Hover Me</a>
         <a href="#" class="button-3">Hover Me</a>
+        <a href="#" class="button-4">Hover Me</a>
     </div>
 
 </body>

sass/style.scss

@@ -13,8 +13,8 @@ body {
 }
 
 .button-container {
-    width: 100%;
-    height: 100vh;
+    width: 90%;
+    height: 30%;
     margin-left: auto;
     margin-right: auto;
     display: flex;
@@ -30,7 +30,7 @@ body {
         border: 2px solid #272727;
         padding: 20px 40px;
         position: relative;
-        margin: 25px;
+        margin: 5px 25px;
     }
 
     .button-1 {
@@ -126,4 +126,36 @@ body {
     .button-3:hover:after {
         transform: rotateY(0deg);
     }
+
+    .button-4 {
+        color: #fff;
+        border-color: #fff;
+        background-color: #222;
+        overflow: hidden;
+        transition: all 1s;
+    }
+
+    .button-4:before {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        content: "YEAH!";
+        position: absolute;
+        top: 0;
+        left: 0;
+        background-color: #f44336;
+        height: 100%;
+        width: 100%;
+        // z-index: -3;
+        transform: translateY(-100%);
+        transition: all 1s;
+    }
+
+    .button-4:hover:before {
+        transform: translateY(0);
+    }
+
+    .button-4:hover {
+        color: #fff;
+    }
 }

style/style.css

@@ -13,8 +13,8 @@ body {
 }
 
 .button-container {
-  width: 100%;
-  height: 100vh;
+  width: 90%;
+  height: 30%;
   margin-left: auto;
   margin-right: auto;
   display: flex;
@@ -31,7 +31,7 @@ body {
   border: 2px solid #272727;
   padding: 20px 40px;
   position: relative;
-  margin: 25px;
+  margin: 5px 25px;
 }
 
 .button-container .button-1 {
@@ -127,3 +127,34 @@ body {
 .button-container .button-3:hover:after {
   transform: rotateY(0deg);
 }
+
+.button-container .button-4 {
+  color: #fff;
+  border-color: #fff;
+  background-color: #222;
+  overflow: hidden;
+  transition: all 1s;
+}
+
+.button-container .button-4:before {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  content: "YEAH!";
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: #f44336;
+  height: 100%;
+  width: 100%;
+  transform: translateY(-100%);
+  transition: all 1s;
+}
+
+.button-container .button-4:hover:before {
+  transform: translateY(0);
+}
+
+.button-container .button-4:hover {
+  color: #fff;
+}