chore: update CTA button style

adobe · Jan 7, 2025 · a88d81b · a88d81b
1 parent d0996c2
commit a88d81b
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 16 deletions.
diff --git a/blocks/feed/feed.css b/blocks/feed/feed.css
@@ -29,21 +29,21 @@
   box-shadow: 0 8px 16px rgba(0 0 0 / 40%);
 }
 
-.read-more {
-  display: inline-block;
-  margin-top: 10px;
-  padding: 10px 20px;
-  border-radius: 25px;
-  width: 150px;
-  background-color: var(--spectrum-blue);
-  color: white;
-  border: none;
-  cursor: pointer;
-  text-align: center;
+.left-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-.read-more:hover {
-  background-color: var(--dark-spectrum-blue);
+.left-container .blog-item.latest:not(.read-more) {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.left-container .read-more {
+  align-self: center;
+  display: inline-block;
 }
 
 .feed.recent .feed-item {

diff --git a/blocks/feed/feed.js b/blocks/feed/feed.js
@@ -88,7 +88,7 @@ export async function renderBlog(block) {
     latestBlogItem.innerHTML = truncatedContent;
   }
 
-  const readMoreButton = createTag('button', { class: 'read-more' }, 'Read More');
+  const readMoreButton = createTag('a', { href: latestBlog.path, class: 'read-more button primary large' }, 'Read More');
   readMoreButton.addEventListener('click', () => {
     window.location.href = latestBlog.path;
   });

diff --git a/styles/styles.css b/styles/styles.css
@@ -685,7 +685,8 @@ a.button > svg > use {
 
 /* primary button: blue bg */
 .redesign a.button:any-link,
-main .form .button {
+main .form .button,
+.feed.blog .read-more {
   cursor: pointer;
   text-decoration: none;
   padding: 5.5px 15px;
@@ -721,7 +722,8 @@ main .form .button {
 }
 
 .redesign a.button:any-link:hover,
-main .form .button:hover {
+main .form .button:hover,
+.feed.blog .read-more:hover {
   color: var(--spectrum-blue);
   border-color: var(--spectrum-blue);
   transform: translateZ(0);