diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..9e26dfe
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1 @@
+{}
\ No newline at end of file
diff --git a/index.html b/index.html
index bd916e9..19c4aba 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
 <body>
     <h1>✨ Style Your Buttons ✨</h1>
     <p>Apply custom styles to your button in the Style.css file</p>
-    <button class="custom-btn btn-1">Click Here</button>
-    <button class="custom-btn btn-2">Click Here</button>
-    <button class="custom-btn btn-3">Click Here</button>
+    <button class="custom-btn btn-1">Hit it</button>
+    <button class="custom-btn btn-2">Hit it</button>
+    <button class="custom-btn btn-3">Hit it</button>
 </body>
 </html>
diff --git a/style.css b/style.css
index be9cc43..73ee089 100644
--- a/style.css
+++ b/style.css
@@ -50,5 +50,106 @@ p {
         4px 4px 5px 0px rgba(0, 0, 0, .1);
     outline: none;
 }
+.btn-1 {
+    background: rgb(6,14,131);
+    background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
+    border: none;
+  }
+  .btn-1:hover {
+     background: rgb(69, 121, 80);
+  background: linear-gradient(0deg, rgb(47, 133, 76) 0%, rgba(2,126,251,1) 100%);
+  }
+  
 
-/* Add your custom styles for btn-1, btn-2, and btn-3 */
\ No newline at end of file
+
+  
+  /* 2 */.btn-2 {
+  background: rgb(39, 82, 173);
+  background: linear-gradient(0deg,rgb(39, 82, 173) 0%,rgb(39, 82, 173) 100%);
+  border: none;
+  
+}
+.btn-2:before {
+  height: 0%;
+  width: 2px;
+}
+.btn-2:hover {
+  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.7),
+              -4px -4px 6px 0 rgba(116, 125, 136, .9), 
+    inset -4px -4px 6px 0 rgba(219, 27, 27, 0.781),
+    inset 4px 4px 6px 0 rgba(219, 27, 27, 0.781);
+}
+
+
+
+.btn-3 {
+    background: rgb(0,172,238);
+  background: linear-gradient(0deg, rgba(2,126,251,1) 0%, rgba(2,126,251,1) 100%);
+    width: 130px;
+    height: 40px;
+    line-height: 42px;
+    padding: 0;
+    border: none;
+    
+  }
+  .btn-3 span {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .btn-3:before,
+  .btn-3:after {
+    position: absolute;
+    content: "";
+    right: 0;
+    top: 0;
+     background: rgba(2,126,251,1);
+    transition: all 0.3s ease;
+  }
+  .btn-3:before {
+    height: 0%;
+    width: 2px;
+  }
+  .btn-3:after {
+    width: 0%;
+    height: 2px;
+  }
+  .btn-3:hover{
+     background: transparent;
+    box-shadow: none;
+  }
+  .btn-3:hover:before {
+    height: 100%;
+  }
+  .btn-3:hover:after {
+    width: 100%;
+  }
+  .btn-3 span:hover{
+     color: rgba(2,126,251,1);
+  }
+  .btn-3 span:before,
+  .btn-3 span:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: 0;
+     background: rgba(2,126,251,1);
+    transition: all 0.3s ease;
+  }
+  .btn-3 span:before {
+    width: 2px;
+    height: 0%;
+  }
+  .btn-3 span:after {
+    width: 0%;
+    height: 2px;
+  }
+  .btn-3 span:hover:before {
+    height: 100%;
+  }
+  .btn-3 span:hover:after {
+    width: 100%;
+  }
+  
+/* Add your custom styles for btn-1, btn-2, and btn-3 */
