more button

src/App/App.css

@@ -471,20 +471,44 @@
     color: white;
     text-decoration: underline;
   }
-  
-  
-  
-  
+  /* * * * * * * * */
+  /* * *BUTTONS* * */
   /* * * * * * * * */
   
+  .hp-more-button{
+    padding: 5px;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
+
+  .hp-more-button :hover{
+    filter: brightness(0.5);
+  }
   
+
+
+  button.tabbutton.Patient.active, button.tabbutton.All.active, 
+  button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
+  button.tabbutton.Medical.active {
+    border-color: black;
+  }
+
+
   
+  .tabbutton {
+    padding: 5px;
+    border-radius: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-left: 5px;
+    margin-right: 5px;
+  }
   
+  /* * * * * * * * */
   /*VILLAGE BUTTONS*/
-  
-  
-  
-  
   /* * * * * * * * */
   
   
@@ -1040,11 +1064,7 @@
     background-color: white;
   }
   
-  button.tabbutton.Patient.active, button.tabbutton.All.active, 
-  button.tabbutton.Industry.active, button.tabbutton.Academia.active, 
-  button.tabbutton.Medical.active {
-    border-color: black;
-  }
+  
   
   .Patient {
     background-color: var(--accen-secondary);
@@ -2187,11 +2207,4 @@
     display: none;
   }
   
-  .tabbutton {
-    padding: 5px;
-    border-radius: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin-left: 5px;
-    margin-right: 5px;
-  }
\ No newline at end of file
+ 
\ No newline at end of file

src/components/Buttons.tsx

 import { Link } from "react-router-dom";
 import { openTab } from "../contents";
+import { openCity } from "./HorizontalTimeline";
 
 interface UrlButtonProps{
     href: string,
@@ -110,4 +111,10 @@ export function TabButton({classy, name, closing, opentype, type}:TabButtonProps
     <button className={classname} onClick={openTab({cityName: type, cla: opentype, weg: closing })}> {name}</button>
     </>
   )
+}
+
+export function HPMoreButton({name}: {name: string}){
+  return(
+    <button className="tablinks hp-more-button" onClick={openCity({cityName: name})}> More</button>
+  )
 }
\ No newline at end of file

src/components/HorizontalTimeline.tsx

-
+import { HPMoreButton } from "./Buttons";
 
 function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
     let cl = "t-tag " + tag;
@@ -20,7 +20,7 @@ function TimeItem({tag, title, children, pic, author, tabid}: ItemProps){
             
             <p>{children}</p>
             <div className="tab">
-              <button className="tablinks" onClick={openCity({cityName: tabid})}>More</button>
+              <HPMoreButton name={tabid}/>
             </div>
         </div>
       </div>