diff --git a/buttons/buttons.css b/buttons/buttons.css
index c065f98..89177da 100644
--- a/buttons/buttons.css
+++ b/buttons/buttons.css
@@ -2179,6 +2179,35 @@ a:focus-visible {
   
   /* Jasimrazi-btn-1 ends here */
 
+
+/* cypher's btn-3 start */
+
+.cypher-btn-3 {
+    font-family: Helvetica;
+    /* letter-spacing: 0.2em; */
+    font-weight: 600;
+    font-size: 25px;
+    text-align: center;
+    color: #202125;
+    cursor: pointer;
+    /* max-width: 480px; */
+    width: 59%;
+    height: 30%;
+    outline: 3px solid;
+    outline-color: rgba(71, 126, 232,0.5);
+    outline-offset: 20px;
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 0.8);
+}
+.cypher-btn-3:hover {
+	color: rgba(71, 126, 232, 0.7);
+  outline-color: rgba(71, 126, 232, 0);
+  outline-offset: 300px;
+}
+
+
+  
+/* cypher's btn-3 end*/
+
 /* Deepesh Sharma's button 1 starts*/
 .deepeshsharmaofficial-button-1 {
     border: 1px solid #3498db;
@@ -2219,3 +2248,4 @@ a:focus-visible {
     height: 0%;
 }
 /* Deepesh Sharma's button 1 ends*/
+
diff --git a/index.html b/index.html
index ee43944..338c5dd 100644
--- a/index.html
+++ b/index.html
@@ -553,6 +553,18 @@
           </div>
           <!--Jasim Razi btn end-->
 
+
+          <!-- cypher's btn-3 start -->
+          <div class="button-container">
+            <button class="cypher-btn-3">Hover me</button>
+            <div class="createdby-section">
+                Created by
+                <a href="https://github.com/cypher1002">cypher 1002</a>
+            </div>
+        </div>
+          <!-- cyphers btn-3 end -->
+
+
             <!-- Deepesh Sharma btn start-->
             <div class="button-container ">
                 <button class="deepeshsharmaofficial-button-1"><span> Hover Me </span></button>
@@ -562,6 +574,7 @@
                 </div>
             </div>
             <!-- Deepesh Sharma btn end-->
+
         </div>
 
     </main>