Merge pull request #37 from irwanphan/newbutton

added gaming style button

Author: tonalmathew

css/buttons.css

@@ -130,4 +130,38 @@
 /* Saksham Mahajan */
 .Saksham {
   background-color: #f69696;
+}
+
+/* irwanphan */
+#irwanphan-btn {
+  width: 150px;
+  height: 54px;
+  cursor: pointer;
+  line-height: 12px;
+  position: relative;
+  border-radius: 16px;
+  transition: .3s ease all;
+  background-color: #000f0b;
+  border: 2px solid #000f0b;
+}
+#irwanphan-btn::before {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  display: block;
+  font-weight: 600;
+  line-height: 54px;
+  color: aliceblue;
+  text-align: center;
+  position: absolute;
+  transition: .3s ease all;
+  content: "it's a button :)";
+}
+#irwanphan-btn:hover {
+  border: 2px solid #13d522;
+}
+#irwanphan-btn:hover::before {
+  color: #13d522;
 }

css/cardcolor.css

@@ -25,3 +25,28 @@
 .roncy {
   background-color: #a287f4;
 }
+
+.irwanphan {
+  background: linear-gradient(270deg, #13d522, #000f0b);
+	background-size: 400% 400%;
+	-webkit-animation: sway 30s ease infinite;
+	-moz-animation: sway 30s ease infinite;
+	animation: sway 30s ease infinite;
+}
+@-webkit-keyframes sway {
+  0% {background-position: 0% 50%;}
+	50% {background-position: 100% 50%;}
+	100% {background-position: 0% 50%;}
+}
+@-moz-keyframes sway {
+	0% {background-position: 0% 50%;}
+	50% {background-position: 100% 50%;}
+	100% {background-position: 0% 50%;}
+}
+@keyframes sway {
+	0% {background-position: 0% 50%;}
+	50% {background-position: 100% 50%;}
+	100% {background-position: 0% 50%;}
+}
+
+

pages/buttons.html

@@ -239,6 +239,40 @@ <h2>
         </div>
       </div>
 
+      <!--Irwan Phan-->
+      <div class="row">
+        <div class="col-lg-6">
+          <div class="component">
+            <div class="card magictime">
+              <div class="card-title irwanphan">
+                <strong>Button</strong>
+              </div>
+              <div class="card-content">
+                <div id="irwanphan-btn"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6">
+          <div class="component">
+            <div class="card magictime">
+
+              <div class="card-title irwanphan">
+                <strong>Creator</strong>
+              </div>
+              <div class="card-content">
+                <div class="creater-name">
+                  <h2>
+                    <b>Name:</b><span>
+                      <a href="https://www.github.com/irwanphan">Irwan Phan</a>
+                    </span>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </section>
   <footer>