add styling links as buttons with hover effect

Author: tomdu3

Wireframe/index.html

@@ -41,7 +41,7 @@ <h2 class="article-title">What Is the Purpose of a Wireframe?</h2>
         process,
         before time and resources are invested in detailed visual design.
       </p>
-      <a href="https://www.productplan.com/glossary/wireframe/" target="_blank"
+      <a href="https://www.productplan.com/glossary/wireframe/" class="article-link" target="_blank"
         aria-label="Read more about wireframes">Read more</a>
     </article>
     <article class="card">
@@ -54,7 +54,7 @@ <h2 class="article-title">What Is a Branch in Git?</h2>
         can be merged back into the main line, integrating the updates seamlessly.
       </p>
       <a href="https://blog.devgenius.io/mastering-git-branches-from-creation-to-conflict-resolution-bd227ee12339"
-        target="_blank" aria-label="Read more about Git branches">Read more</a>
+        class="article-link" target="_blank" aria-label="Read more about Git branches">Read more</a>
     </article>
   </main>
   <footer>

Wireframe/style.css

@@ -111,4 +111,26 @@ article {
   >img {
     grid-column: span 3;
   }
+}
+
+.article-link {
+  text-decoration: none;
+  color: white;
+  background-color: #ff6b6b;
+  border: 1px solid #ff6b6b;
+  border-radius: 4px;
+  text-align: center;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 0.85rem;
+  letter-spacing: 0.05em;
+  margin-top: var(--space);
+  align-self: start;
+  transition: background-color 0.2s ease, border-color 0.2s ease;
+}
+
+.article-link:hover {
+  background-color: #d9383a;
+  border-color: #d9383a;
+  color: white;
 }