diff --git a/assets/css/index.css b/assets/css/index.css
index 4485f43..e45789c 100644
--- a/assets/css/index.css
+++ b/assets/css/index.css
@@ -51,7 +51,7 @@
     color: #050801;
   	box-shadow: 0 0 5px #fff;
     text-align: center;
-    background: #f40317;
+    background: #D44535;
     overflow: hidden;
     text-decoration: none;
     
@@ -66,7 +66,7 @@
     color: #050801;
   	box-shadow: 0 0 5px #fff;
     text-align: center;
-    background: #0000ff;
+    background: #32CBFF;
     overflow: hidden;
     text-decoration: none;
     
@@ -95,7 +95,7 @@
     color: #050801;
   	box-shadow: 0 0 5px #fff;
     text-align: center;
-    background: #00ff00;
+    background: #04DC3A;
     overflow: hidden;
     text-decoration: none;
     
@@ -110,7 +110,7 @@
     color: #050801;
   	box-shadow: 0 0 5px #fff;
     text-align: center;
-    background: #009933;
+    background: #B2EF2E;
     overflow: hidden;
     text-decoration: none;
     
@@ -132,13 +132,13 @@
     font-weight: bold;
 }
 .h-danger:hover{
-    background:  #f40317;
+    background:  #D44535;
     color: #fff;
     text-decoration: none;
-    box-shadow: 0 0 5px #f40317,
-                0 0 25px #f40317,
-                0 0 50px #f40317,
-                0 0 100px #f40317;
+    box-shadow: 0 0 5px #D44535,
+                0 0 25px #D44535,
+                0 0 50px #D44535,
+                0 0 100px #D44535;
 }
 .h-peace:hover{
     background:  #ffe;
@@ -150,13 +150,13 @@
                 0 0 100px #ffe;
 }
 .h-primary:hover{
-background:  #0000ff;
+background:  #32CBFF;
 color: #fff;
 text-decoration: none;
-box-shadow: 0 0 5px #0000ff,
-                0 0 25px #0000ff,
-                0 0 50px #0000ff,
-                0 0 100px #0000ff;
+box-shadow: 0 0 5px #32CBFF,
+                0 0 25px #32CBFF,
+                0 0 50px #32CBFF,
+                0 0 100px #32CBFF;
 }
 
 .h-dark:hover{
@@ -170,33 +170,33 @@ box-shadow: 0 0 5px #000,
 }
 
 .h-success:hover{
-background:  #009933;
+background:  #B2EF2E;
 color: #fff;
 text-decoration: none;
-box-shadow: 0 0 5px #009933,
-                0 0 25px #009933,
-                0 0 50px #009933,
-                0 0 100px #009933;
+box-shadow: 0 0 5px #B2EF2E,
+                0 0 25px #B2EF2E,
+                0 0 50px #B2EF2E,
+                0 0 100px #B2EF2E;
 }
 
 .h-lime:hover{
-background:  #00ff00;
+background:  #04DC3A;
 color: #fff;
 text-decoration: none;
-box-shadow: 0 0 5px #00ff00,
-                0 0 25px #00ff00,
-                0 0 50px #00ff00,
-                0 0 100px #00ff00;
+box-shadow: 0 0 5px #04DC3A,
+                0 0 25px #04DC3A,
+                0 0 50px #04DC3A,
+                0 0 100px #04DC3A;
 }
 
 .h-aqua:hover{
-	background:  #00e6e6;
+	background:  #69EBD0;
 color: #fff;
 text-decoration: none;
-box-shadow: 0 0 5px #00e6e6,
-                0 0 25px #00e6e6,
-                0 0 50px #00e6e6,
-                0 0 100px #00e6e6;
+box-shadow: 0 0 5px #69EBD0,
+                0 0 25px #69EBD0,
+                0 0 50px #69EBD0,
+                0 0 100px #69EBD0;
 }
 
 .h-warning:hover{
@@ -381,7 +381,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg,transparent,#00ff00);
+    background: linear-gradient(90deg,transparent,#04DC3A);
     animation: animate1 1s linear infinite;
 }
 @keyframes animate1
@@ -399,7 +399,7 @@ box-shadow: 0 0 5px #ffff00,
     right: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(180deg,transparent,#00ff00);
+    background: linear-gradient(180deg,transparent,#04DC3A);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 }
@@ -418,7 +418,7 @@ box-shadow: 0 0 5px #ffff00,
     bottom: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(270deg,transparent,#00ff00);
+    background: linear-gradient(270deg,transparent,#04DC3A);
     animation: animate3 1s linear infinite;
     animation-delay: 0.5s;
 }
@@ -437,7 +437,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(360deg,transparent,#00ff00);
+    background: linear-gradient(360deg,transparent,#04DC3A);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 }
@@ -461,7 +461,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg,transparent,#f40317);
+    background: linear-gradient(90deg,transparent,#D44535);
     animation: animate1 1s linear infinite;
 }
 @keyframes animate1
@@ -479,7 +479,7 @@ box-shadow: 0 0 5px #ffff00,
     right: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(180deg,transparent,#f40317);
+    background: linear-gradient(180deg,transparent,#D44535);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 }
@@ -498,7 +498,7 @@ box-shadow: 0 0 5px #ffff00,
     bottom: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(270deg,transparent,#f40317);
+    background: linear-gradient(270deg,transparent,#D44535);
     animation: animate3 1s linear infinite;
     animation-delay: 0.5s;
 }
@@ -517,7 +517,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(360deg,transparent,#f40317);
+    background: linear-gradient(360deg,transparent,#D44535);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 }
@@ -622,7 +622,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg,transparent,#f40317);
+    background: linear-gradient(90deg,transparent,#D44535);
     animation: animate1 1s linear infinite;
 }
 @keyframes animate1
@@ -640,7 +640,7 @@ box-shadow: 0 0 5px #ffff00,
     right: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(180deg,transparent,#f40317);
+    background: linear-gradient(180deg,transparent,#D44535);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 }
@@ -659,7 +659,7 @@ box-shadow: 0 0 5px #ffff00,
     bottom: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(270deg,transparent,#f40317);
+    background: linear-gradient(270deg,transparent,#D44535);
     animation: animate3 1s linear infinite;
     animation-delay: 0.5s;
 }
@@ -678,7 +678,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(360deg,transparent,#f40317);
+    background: linear-gradient(360deg,transparent,#D44535);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 }
@@ -784,7 +784,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg,transparent,#f40317);
+    background: linear-gradient(90deg,transparent,#D44535);
     animation: animate1 1s linear infinite;
 }
 @keyframes animate1
@@ -802,7 +802,7 @@ box-shadow: 0 0 5px #ffff00,
     right: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(180deg,transparent,#f40317);
+    background: linear-gradient(180deg,transparent,#D44535);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 }
@@ -821,7 +821,7 @@ box-shadow: 0 0 5px #ffff00,
     bottom: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(270deg,transparent,#f40317);
+    background: linear-gradient(270deg,transparent,#D44535);
     animation: animate3 1s linear infinite;
     animation-delay: 0.5s;
 }
@@ -840,7 +840,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(360deg,transparent,#f40317);
+    background: linear-gradient(360deg,transparent,#D44535);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 }
@@ -863,7 +863,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(90deg,transparent,#f40317);
+    background: linear-gradient(90deg,transparent,#D44535);
     animation: animate1 1s linear infinite;
 }
 @keyframes animate1
@@ -881,7 +881,7 @@ box-shadow: 0 0 5px #ffff00,
     right: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(180deg,transparent,#f40317);
+    background: linear-gradient(180deg,transparent,#D44535);
     animation: animate2 1s linear infinite;
     animation-delay: 0.25s;
 }
@@ -900,7 +900,7 @@ box-shadow: 0 0 5px #ffff00,
     bottom: 0;
     width: 100%;
     height: 2px;
-    background: linear-gradient(270deg,transparent,#f40317);
+    background: linear-gradient(270deg,transparent,#D44535);
     animation: animate3 1s linear infinite;
     animation-delay: 0.5s;
 }
@@ -919,7 +919,7 @@ box-shadow: 0 0 5px #ffff00,
     left: 0;
     width: 2px;
     height: 100%;
-    background: linear-gradient(360deg,transparent,#f40317);
+    background: linear-gradient(360deg,transparent,#D44535);
     animation: animate4 1s linear infinite;
     animation-delay: 0.75s;
 }
@@ -934,4 +934,21 @@ box-shadow: 0 0 5px #ffff00,
 }
 }
 
-/* Write Your CSS here */
\ No newline at end of file
+/* Write Your CSS here */
+.bt-neon{
+    margin: 5px;
+	border-radius: 5px;
+    position: relative;
+    display: inline-block;
+    padding: 10px 15px;
+    color: #ececec;
+  	box-shadow: 0 0 5px #eeccee;
+    text-align: center;
+    background: #94fc13;
+    overflow: hidden;
+    text-decoration: none;
+    font-weight: bold;
+}
+.nav-link{
+    font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 8585229..8767927 100644
--- a/index.html
+++ b/index.html
@@ -1,99 +1,136 @@
 <!DOCTYPE html>
 <html>
-<head>
-	<title>MJButton</title>
-	<link rel="stylesheet" href="assets/css/index.css">
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
-	<link rel="shortcut icon" type="image/x-icon" href="assets/icon/favicon.png">
-        
-	<style type="text/css">
-		body{
-			margin: 0;
-			padding:0;
-			background: #ffe;
-		}
+  <head>
+    <title>MJButton</title>
+    <link rel="stylesheet" href="assets/css/index.css" />
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+      href="assets/icon/favicon.png"
+    />
 
-		#code{
-		height: 100%;
-		align-content:center;
-		 padding: 10px;
-		 background: #000;
-		 color: #fff;
-		 resize: none;
-		}
-		section{
-			padding-top: 120px;
-			padding-bottom: 50px;
-		}
-		.mycenter{
-			text-align: center;
-		}
-		.pd-15{
-			padding: 15px;
-		}
-	</style>
-</head>
-<body >
-<header>
-	<nav class="navbar navbar-expand-lg py-3 navbar-dark shadow-sm fixed-top" style="background: royalblue; margin-bottom: 100px;">
-            <div class="container">
-              <a href="index.html" class="navbar-brand">
-                <span class="text-uppercase bt">
-                	<span></span>
-                	<span></span>
-                	<span></span>
-                	<span></span>
+    <style type="text/css">
+      body {
+        margin: 0;
+        padding: 0;
+        background: #ffe;
+      }
 
-                MJButton</span>
-              </a>
-          
-              <button type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler"><span class="navbar-toggler-icon"></span></button>
-          
-              <div id="navbarSupportedContent" class="collapse navbar-collapse">
-                <ul class="navbar-nav ml-auto">
-                  <li class="nav-item active"><a href="index.html" class="nav-link">Home <span class="sr-only">(current)</span></a></li>
-                  <li class="nav-item"><a href="#colored" class="nav-link">colored</a></li>
-                  <li class="nav-item"><a href="#hover" class="nav-link">hover</a></li>
-                  <li class="nav-item"><a href="#animated" class="nav-link">Animated</a></li>
-                  <li class="nav-item"><a href="#start" class=" h-aqua bt-primary">
-                  	<span></span>
-                	<span></span>
-                	<span></span>
-                	<span></span>
-                  Get Started</a></li>
-                </ul>
-              </div>
-            </div>
-          </nav>
-</header>
+      #code {
+        height: 100%;
+        align-content: center;
+        padding: 10px;
+        background: #000;
+        color: #fff;
+        resize: none;
+      }
+      section {
+        padding-top: 120px;
+        padding-bottom: 50px;
+      }
+      .mycenter {
+        text-align: center;
+      }
+      .pd-15 {
+        padding: 15px;
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <nav
+        class="navbar navbar-expand-lg py-3 navbar-dark shadow-sm fixed-top"
+        style="background: #F7A9A8; margin-bottom: 100px"
+      >
+        <div class="container">
+          <a href="index.html" class="navbar-brand">
+            <span class="text-uppercase bt">
+              <span></span>
+              <span></span>
+              <span></span>
+              <span></span>
 
+              MJButton</span
+            >
+          </a>
 
-<section>
-    <div class="container-fluid">
-    <div align="center"><h2 class="bt h-aqua">
-        <span></span>
-        <span></span>
-        <span></span>
-        <span></span>
-    Live Preview Here</h2></div>
-    <div class="row" style="height: 420px;">
-        <div class="col-sm-6">
-            <div id="codeshow" style="background: #fee; width: 100%;height: 100%; padding: 10px;">
-                <!DOCTYPE html>
-<html>
-<head>
-    <title></title>
-</head>
-<body>
-<p class="bt-success h-primary">MJButton</p>
+          <button
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+            class="navbar-toggler"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
 
-</body>
-</html>
-            </div>
-            
+          <div id="navbarSupportedContent" class="collapse navbar-collapse">
+            <ul class="navbar-nav ml-auto">
+              <li class="nav-item active">
+                <a href="index.html" class="nav-link"
+                  >Home <span class="sr-only">(current)</span></a
+                >
+              </li>
+              <li class="nav-item">
+                <a href="#colored" class="nav-link">Colored</a>
+              </li>
+              <li class="nav-item">
+                <a href="#hover" class="nav-link">Hover</a>
+              </li>
+              <li class="nav-item">
+                <a href="#animated" class="nav-link">Animated</a>
+              </li>
+              <li class="nav-item">
+                <a href="#start" class="h-aqua bt-primary">
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  <span></span>
+                  Get Started</a
+                >
+              </li>
+            </ul>
+          </div>
         </div>
-        <div class="col-sm-6">
-<textarea id="code" onkeyup="paste();" class="form-control">
+      </nav>
+    </header>
+
+    <section>
+      <div class="container-fluid">
+        <div align="center">
+          <h2 class="bt h-aqua">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Live Preview Here
+          </h2>
+        </div>
+        <div class="row" style="height: 420px">
+          <div class="col-sm-6">
+            <div
+              id="codeshow"
+              style="background: #fee; width: 100%; height: 100%; padding: 10px"
+            >
+              <!DOCTYPE html>
+              <html>
+                <head>
+                  <title></title>
+                </head>
+                <body>
+                  <p class="bt-success h-primary">MJButton</p>
+                </body>
+              </html>
+            </div>
+          </div>
+          <div class="col-sm-6">
+            <textarea id="code" onkeyup="paste();" class="form-control">
 &lt!DOCTYPE html&gt
 &lthtml&gt
 &lthead&gt
@@ -104,161 +141,167 @@
 
 &lt/body&gt
 &lt/html&gt
-</textarea>     
+</textarea
+            >
+          </div>
         </div>
-    </div>
-</div>
-</section>
+      </div>
+    </section>
 
-<section id="start">
-    <h1 align="center">Get Started</h1>
-    <div class="mycenter">
+    <section id="start">
+      <h1 align="center">Get Started</h1>
+      <div class="mycenter">
         <p>copy below link and paste inside &lthead&gt tag</p>
-        <code>&ltlink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"&gt</code>
+        <code
+          >&ltlink rel="stylesheet"
+          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"&gt</code
+        >
 
         <div>
-            <a class="bt-peace h-aqua" href="">
+          <a class="bt-peace h-aqua" href="">
             <span></span>
             <span></span>
             <span></span>
             <span></span>
-            Download CSS File</a>
+            Download CSS File</a
+          >
         </div>
-    </div>
-</section>
-
-<section id="colored" class="mycenter">
-    <div class="container">
-        <h2 class="pd-15">SImple Button</h2>
-    <div class="row">
-    <p class="bt " href="">bt</p>
-    <p class="bt-danger" href="">bt-danger</p>
-    <p class="bt-peace" href="">bt-peace</p>
-    <p class="bt-primary" href="">bt-primary</p>
-    <p class="bt-aqua" href="">bt-aqua</p>
-    <p class="bt-warning" href="">bt-warning</p>
-    <p class="bt-lime" href="">bt-lime</p>
-    <p class="bt-success" href="">bt-success</p>
-    <p class="bt-dark" href="">bt-dark</p>
+      </div>
+    </section>
 
-    </div>
-    </div>
-</section>
+    <section id="colored" class="mycenter">
+      <div class="container">
+        <h2 class="pd-15">Simple Button</h2>
+        <div class="row">
+          <p class="bt" href="">bt</p>
+          <p class="bt-danger" href="">bt-danger</p>
+          <p class="bt-peace" href="">bt-peace</p>
+          <p class="bt-primary" href="">bt-primary</p>
+          <p class="bt-aqua" href="">bt-aqua</p>
+          <p class="bt-warning" href="">bt-warning</p>
+          <p class="bt-lime" href="">bt-lime</p>
+          <p class="bt-success" href="">bt-success</p>
+          <p class="bt-dark" href="">bt-dark</p>
+          <p class="bt-neon" href="">bt-neon</p>
+        </div>
+      </div>
+    </section>
 
-<section id="hover" class="mycenter">
-    <div class="container">
+    <section id="hover" class="mycenter">
+      <div class="container">
         <h2 class="pd-15">Hover Button</h2>
-    <div class="row">
-    <p class="bt h-aqua">bt h-aqua</p>
-    <p class="bt-danger h-primary">bt-danger h-primary</p>
-    <p class="bt-peace h-danger" href="">bt-peace h-danger</p>
-    <p class="bt-primary h-dark" href="">bt-primary h-dark</p>
-    <p class="bt-aqua h-peace" href="">bt-aqua h-peace</p>
-    <p class="bt-warning h-success" href="">bt-warning h-success</p>
-    <p class="bt-lime h-aqua" href="">bt-lime h-aqua</p>
-    <p class="bt-success h-lime" href="">bt-success h-lime</p>
-    <p class="bt-dark h-warning" href="">bt-dark h-warning</p>
-
-    </div>
-    </div>
-</section>
-<section id="animated" class="mycenter">
-    <div class="container">
+        <div class="row">
+          <p class="bt h-aqua">bt h-aqua</p>
+          <p class="bt-danger h-primary">bt-danger h-primary</p>
+          <p class="bt-peace h-danger" href="">bt-peace h-danger</p>
+          <p class="bt-primary h-dark" href="">bt-primary h-dark</p>
+          <p class="bt-aqua h-peace" href="">bt-aqua h-peace</p>
+          <p class="bt-warning h-success" href="">bt-warning h-success</p>
+          <p class="bt-lime h-aqua" href="">bt-lime h-aqua</p>
+          <p class="bt-success h-lime" href="">bt-success h-lime</p>
+          <p class="bt-dark h-warning" href="">bt-dark h-warning</p>
+        </div>
+      </div>
+    </section>
+    <section id="animated" class="mycenter">
+      <div class="container">
         <h2 class="pd-15">Animated Button</h2>
         <div class="row">
-    <p class="bt h-aqua">
-        <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-warning h-danger" href="">
-        <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-primary h-dark" href="">
-<span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-aqua h-peace" href="">
-        <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-peace h-success" href="">
-        <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-lime h-aqua" href="">
-<span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-success h-lime" href="">
-<span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-    <p class="bt-dark h-warning" href="">
-<span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-    Button</p>
-
-    <p class="bt-danger h-primary" href="">
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                    Download
-                </p>
-
-</div>
-<h5 class="pd-15">Follow The Below Syntax</h5>
-<code>
-	&lttagOpen class="according to color and hover" &gt
-	<br>
-	&ltspan&gt&lt/span&gt
-	<br>
-	&ltspan&gt&lt/span&gt
-	<br>
-	&ltspan&gt&lt/span&gt
-	<br>
-	&ltspan&gt&lt/span&gt
-	<br>
-	Text&lt/tagClose&gt
-</code>
-    </div>
-
-</section>
+          <p class="bt h-aqua">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-warning h-danger" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-primary h-dark" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-aqua h-peace" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-peace h-success" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-lime h-aqua" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-success h-lime" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
+          <p class="bt-dark h-warning" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Button
+          </p>
 
+          <p class="bt-danger h-primary" href="">
+            <span></span>
+            <span></span>
+            <span></span>
+            <span></span>
+            Download
+          </p>
+        </div>
+        <h5 class="pd-15">Follow The Below Syntax</h5>
+        <code>
+          &lttagOpen class="according to color and hover" &gt
+          <br />
+          &ltspan&gt&lt/span&gt
+          <br />
+          &ltspan&gt&lt/span&gt
+          <br />
+          &ltspan&gt&lt/span&gt
+          <br />
+          &ltspan&gt&lt/span&gt
+          <br />
+          Text&lt/tagClose&gt
+        </code>
+      </div>
+    </section>
 
-<script type="text/javascript">
-    function paste() {
-        code=document.querySelector("#code");
-        currectCode=code.value;
+    <script type="text/javascript">
+      function paste() {
+        code = document.querySelector("#code");
+        currectCode = code.value;
         console.log(currectCode);
-        document.querySelector("#codeshow").innerHTML=currectCode;
-    }
-    
-</script>
-<script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
-<script src="assets/js/index.js"></script>
-
+        document.querySelector("#codeshow").innerHTML = currectCode;
+      }
+    </script>
+    <script src="https://cdn.jsdelivr.net/gh/cferdinandi/smooth-scroll@15/dist/smooth-scroll.polyfills.min.js"></script>
+    <script src="assets/js/index.js"></script>
 
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
-  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
-</body>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
+  </body>
 </html>
-
diff --git a/neuromorphic.css b/neuromorphic.css
new file mode 100644
index 0000000..20ad204
--- /dev/null
+++ b/neuromorphic.css
@@ -0,0 +1,41 @@
+* {
+  margin: 0;
+  padding: 0;
+  font-family: consolas;
+}
+
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+  background: #F9C9C7;
+}
+
+a {
+  position: relative;
+  display: inline-block;
+  padding: 10px 30px;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-weight: 500;
+  letter-spacing: 2px;
+  color: #5a84a2;
+  font-size: 18px;
+  border-radius: 40px;
+  box-shadow: -2px -2px 8px rgba(255, 255, 255, 1),
+    -2px -2px 12px rgba(255, 255, 255, 0.5),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+a:hover {
+  box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 1),
+    inset -2px -2px 12px rgba(255, 255, 255, 0.5),
+    inset 2px 2px 4px rgba(255, 255, 255, 0.1),
+    inset 2px 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+a:hover span {
+  display: inline-block;
+  transform: scale(0.98);
+}
diff --git a/neuromorphic.html b/neuromorphic.html
new file mode 100644
index 0000000..0728c4d
--- /dev/null
+++ b/neuromorphic.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="neuromorphic.css">
+    <title>Neuromorphic button</title>
+</head>
+<body>
+    <a href="#"><span>Button</span></a>
+</body>
+</html>
\ No newline at end of file