Styling "Read More" links in blog category pages

I am trying to style the my category blog pages to how I’ve styled my blog summary blocks, specifically, the “Read More” link.

Here is the style of the summary block where the “Read More” link is styled correctly:

https://www.lucasano.com/test-5

And below is a link to one of my category pages where I've tried to mimic the "Read More" style button:

https://www.lucasano.com/blog-content/category/Latest+Work

I can’t get the "Read More" link to style correctly even though I am using the same code for the summary block, but targeting the .blog-more-link selector. Also, the underline is not going away, despite the correct code to remove it. Here is the code I am using:

.blog-more-link {
    position: relative !important;
    display: inline-block !important;
    height: 40px !important;
    padding-top: 6px !important;
    padding-left: 5px !important;
    padding-right: 0px !important;
    padding-bottom: 5px !important;
    font-size: 13px !important;
    top: -20px !important;
    color: initial !important;
    z-index: 1 !important;
    transition: color 0.3s !important;
    text-decoration: none !important;
}

.blog-more-link::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 30% !important;
    height: 80% !important;
    border: 1px solid #323843 !important;
    box-sizing: border-box !important;
    transform: translateX(-50%) !important;
    border-radius: 4px !important;
    background-color: transparent !important;
    transition: background-color 0.3s !important;
    z-index: -1 !important;
}

.blog-more-link:hover::before {
    background-color: #323843 !important;
}

.blog-more-link:hover {
    color: #EFEAE6 !important;
}

Hey Luke! I'd love to help. Here is a quick code fix for ya:

.blog-more-link {
    border:1px solid #323843!important;
    padding:5px!important;
    padding-right:1.5rem!important;
    border-radius:4px;
    transition: all .3s!important;
}

.blog-more-link:after{
    background:transparent!important;
    content:"→"!important;
    transform:translate(3rem, -1rem)
}
.blog-more-link:hover{
    background:#323843;
    color:#FFF!important;
    transition: all .3s!important;
}

Thank you, @inside_the_square! This code worked perfectly! I had a couple other issues trying to get the category pages to match the style of blog post pages and summary blocks:

• The date on category pages are displayed as 00/00/00 whereas blog posts and summary blocks are displayed as June 1, 2024. Is there a code to match to June 1, 2024?
• I’d like the date displayed on top, then category underneath, followed by the blog title. 

You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter:

.blog-meta-section{
 flex-direction:column
}
.blog-meta-delimiter{
 display:none!important
}

1 hour ago, inside_the_square said:

You'll need some javascript to change the date type; not my specialty but hopefully another Squarespacer can help! For the order, you can use the settings built into Squarespace to set your primary metadata as the date, followed by the category as your secondary metadata. After that, this code will organize them into a column and hide the delimiter:

.blog-meta-section{
 flex-direction:column
}
.blog-meta-delimiter{
 display:none!important
}

 

Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post

On 6/4/2024 at 4:42 AM, LukeDesign said:

Thank you! For a blog post, is there a way to stack the meta as well - with date on top and category underneath? https://www.lucasano.com/blog-content/template-blog-post

You can use this CSS code

div.blog-item-meta-wrapper {
    flex-direction: column-reverse;
}

17 hours ago, tuanphan said:

You can use this CSS code

div.blog-item-meta-wrapper {
    flex-direction: column-reverse;
}

Awesome, thank you!