fix: ✏️ fix typos in button page

Author: shan-shaji

css/buttons.css

@@ -4,7 +4,7 @@
 
 .button {
   border-radius: 4px;
- 
+
   border: none;
   color: #ffffff;
   text-align: center;
@@ -40,38 +40,85 @@
   opacity: 1;
   right: 0;
 }
-.btn {
-  width: 180px;
-  height: 60px;
+
+/* Roncy r thomas */
+
+#roncy-btn {
+  width: 150px;
+  height: 50px;
+  border-radius: 180px;
+  position: relative;
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #07b39b,
+    #6fba82
+  );
   cursor: pointer;
-  background: transparent;
-  border: 1px solid #91C9FF;
-  outline: none;
-  transition: 1s ease-in-out;
+  line-height: 12px;
 }
 
-svg {
+#roncy-btn:before {
+  content: "";
+  z-index: 1;
   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;
+  display: block;
+  width: 80%;
+  height: 70%;
+  top: 15%;
+  left: 10%;
+  transition: 0.3s opacity ease-in-out;
+  filter: blur(15px);
+  opacity: 0;
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #07b39b,
+    #6fba82
+  );
 }
 
-.btn:hover svg {
-  stroke-dashoffset: -480;
+#roncy-btn:hover:before {
+  opacity: 1;
+  transition: 0.3s opacity ease-in-out;
+  filter: blur(25px);
+  background: linear-gradient(
+    60deg,
+    #f79533,
+    #f37055,
+    #ef4e7b,
+    #a166ab,
+    #5073b8,
+    #1098ad,
+    #07b39b,
+    #6fba82
+  );
 }
 
-.btn span {
-  color: black;
+#roncy-btn:after {
+  content: "CLICK ME!";
+  text-align: center;
+  line-height: 40px;
   font-size: 18px;
-  font-weight: 300;
+  color: rgba(235, 235, 235, 1);
+  font-weight: bold;
+  z-index: 5;
+  position: absolute;
+  display: block;
+  border-radius: 180px;
+  width: 92%;
+  height: 80%;
+  top: 10%;
+  left: 4%;
+  background-color: rgb(19, 20, 22);
 }

css/cardcolor.css

@@ -22,3 +22,6 @@
   background-color: #35cce0;
 }
 
+.roncy {
+  background-color: #a287f4;
+}

pages/buttons.html

@@ -69,49 +69,33 @@ <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">
+              <div class="card-title roncy">
                 <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 id="roncy-btn"></div>
               </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">
+
+              <div class="card-title roncy">
                 <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>
+                    <b>Name:</b><span>
+                      <a href="https://www.github.com/roncyrthomas">Roncy R Thomas</a>
                     </span>
                   </h2>
                 </div>