Modernized Button Styling and Layout

piug-07 · May 12, 2024 · fcbbb71 · fcbbb71
1 parent c7d6883
commit fcbbb71
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/css/sec1.css b/css/sec1.css
@@ -65,16 +65,30 @@
 }
 
 .s1btn1 {
-    height: 2.4vw;
-    width:fit-content;
-    padding: 2px;
-    margin: 0 0.7vw;
+    flex: 1; 
+    padding: 10px;
+    margin: 0 5px;
     border: none;
-    border-radius: 1vw;
+    border-radius: 20px; 
     background-color: #ff765d;
     color: white;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+  }
+
+  .s1btn1:hover {
+    background-color: #ff8c78;
+  }
+
 
-}
+.button-container {
+    display: flex;
+    justify-content: space-between;
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
 
 .s1part2 a {
     margin: 0 0.7vw;

diff --git a/index.html b/index.html
@@ -111,14 +111,19 @@
         })
       </script>
     </div>
+
     <input class="search" placeholder="Search"></input>
+    <div class="button-container">
     <button class="s1btn1" >All</button>
-        <button class="s1btn1" style="background-color: white;color:black;" id = 'Tech' onclick="buttonClick('Tech')">Technology</button>
-        <button class="s1btn1"style="background-color: white;color:black;" id = 'branding' onclick="buttonClick('branding')">Branding </button>
-          <button class="s1btn1"style="background-color: white;color:black" id = 'news' onclick="buttonClick('news')" >News</button>
-            <button class="s1btn1"style="background-color: white;color:black"  id = 'AI' onclick="buttonClick('AI')" > AI</button>
-              <button class="s1btn1"style="background-color: white;color:black" id = 'Management' onclick="buttonClick('Management')" >Management</button>
-                <button class="s1btn1"style="background-color: white;color:black" id = 'Design' onclick="buttonClick('Design')">Design</button>
+    <button class="s1btn1" id="Tech" onclick="buttonClick('Tech')">Technology</button>
+    <button class="s1btn1" id="branding" onclick="buttonClick('branding')">Branding</button>
+    <button class="s1btn1" id="news" onclick="buttonClick('news')">News</button>
+    <button class="s1btn1" id="AI" onclick="buttonClick('AI')">AI</button>
+    <button class="s1btn1" id="Management" onclick="buttonClick('Management')">Management</button>
+    <button class="s1btn1" id="Design" onclick="buttonClick('Design')">Design</button>
+  </div>
+
+
   </div>
   <!-- Sec-2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->