Roncy R Thomas- Button

Author: roncyrthomas

css/buttons.css

@@ -4,7 +4,7 @@
 
 .button {
   border-radius: 4px;
-  background-color: #ff7281;
+ 
   border: none;
   color: #ffffff;
   text-align: center;
@@ -40,3 +40,38 @@
   opacity: 1;
   right: 0;
 }
+.btn {
+  width: 180px;
+  height: 60px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid #91C9FF;
+  outline: none;
+  transition: 1s ease-in-out;
+}
+
+svg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  fill: none;
+  stroke: #fff;
+  stroke-dasharray: 150 480;
+  stroke-dashoffset: 150;
+  transition: 1s ease-in-out;
+}
+
+.btn:hover {
+  transition: 1s ease-in-out;
+  background: #4F95DA;
+}
+
+.btn:hover svg {
+  stroke-dashoffset: -480;
+}
+
+.btn span {
+  color: black;
+  font-size: 18px;
+  font-weight: 300;
+}

css/cardcolor.css

@@ -21,3 +21,4 @@
 .demo {
   background-color: #35cce0;
 }
+

css/style.css

@@ -78,7 +78,7 @@ footer {
   position: relative;
   background-color: #ff5a79;
   color: #fff;
-  box-shadow: 0 4px #f3002e;
+  /* box-shadow: 0 4px #f3002e; */
   text-decoration: none;
 }
 

pages/buttons.html

@@ -69,6 +69,57 @@ <h2>
           </div>
         </div>
       </div>
+      <!-- Roncy R Thomas-->
+      <div class="row">
+        <div class="col-lg-6">
+          <div class="component">
+            <div class="card magictime">
+              
+
+              
+              <div class="card-title philip">
+                <strong>Button</strong>
+              </div>
+              <div class="card-content">
+                <button class="btn">
+                  <svg width="180px" height="60px" viewBox="0 0 180 60" class="border">
+                    <polyline points="179,1 179,59 1,59 1,1 179,1" class="bg-line" />
+                    <polyline points="179,1 179,59 1,59 1,1 179,1" class="hl-line" />
+                  </svg>
+                  <span>HOVER ME</span>
+                </button>
+                
+                
+              
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-lg-6">
+          <div class="component">
+            <div class="card magictime">
+              
+              <!-- Here Philip is the css selector for changing card color-->
+              
+              <div class="card-title philip">
+                <strong>Creator</strong>
+              </div>
+              <div class="card-content">
+                <div class="creater-name">
+                  <h2>
+                    <b>Name:</b
+                    ><span>
+
+                    
+                    <a href="https://www.github.com/roncyrthomas">Roncy R Thomas</a>
+                    </span>
+                  </h2>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
       <!-- Joyal Joseph -->
       <div class="row">