Update wireframe HTML and CSS

Author: Zadri415

Wireframe/index.html

@@ -19,7 +19,7 @@ <h2>What is a README file?</h2>
         <p>
           A README file is an essential component of many software projects, especially those hosted on platforms like GitHub.
         </p>
-        <a href="https://www.geeksforgeeks.org/what-is-readme-md-file/#what-is-a-readmemd-file">Read more</a>
+        <a class="btn" href="https://www.geeksforgeeks.org/what-is-readme-md-file/#what-is-a-readmemd-file">Read more</a>
       </article>
 
       <article>
@@ -28,7 +28,7 @@ <h2>What is a Wireframe?</h2>
         <p>
           A wireframe is a visual blueprint of a website or application's layout, focusing on structure and functionality without the distraction of design elements.
         </p>
-        <a href="https://balsamiq.com/learn/articles/what-are-wireframes">Read more</a>
+        <a class="btn" href="https://balsamiq.com/learn/articles/what-are-wireframes">Read more</a>
       </article>
 
       <article>
@@ -37,9 +37,8 @@ <h2>What is a Branch in Git?</h2>
         <p>
           In Git, a branch is an independent line of development that allows you to work on new features or fixes without affecting the main codebase.
         </p>
-        <a href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
+        <a class="btn" href="https://www.w3schools.com/git/git_branch.asp">Read more</a>
       </article>
-      
     </main>
 
 

Wireframe/style.css

@@ -57,22 +57,25 @@ header p {
   text-align: center;
 }
 
-a {
-  padding: var(--space);
-  border: var(--line);
-  align-items: center;
-  gap: .5rem;
-  display: inline-flex;
+.btn {
+  display: inline-block;
+  padding: 8px 14px;
+  border: 2px solid var(--line);
+  border-radius: 8px;
+  background: #f7f7f7;
+  color: var(--ink);
+  font-weight: 700;
   text-decoration: none;
-   border-color: currentColor;;
-  border-radius: .5rem;
-  transition: transition: background-color .2s ease, border-color .2s ease, transform .1s ease;
+
 }
 
-a:hover {
-  background-color: color-mix(in oklab, var(--paper)90%, white);
-  transform: scale(1.02);
+.btn:focus, .btn:hover-visible {
+  outline: none;
+  transform: translayeY(-1px);
+  box-shadow: 0 1px 0 rgba(0,0,0,.15);
 }
+.btn:active { transform: translateY(0); box-shadow: none; }
+
 
 img,
 svg {