Add a sleek, slim pill button for your 'Read More' blog links

Give your 'Read More' links a sleek, modern look with a slim, pill-shaped button. With just a few lines of CSS, you can create a button that’s both stylish and functional, with a little hover effect for added pizzazz! Follow these simple steps to implement it:

---

Step 1: Access the CSS Editor

1. Log in to your Squarespace website.

2. In the sidebar menu, click on Design, then navigate to Custom CSS.

---

Step 2: Paste the CSS Code

1. Copy and paste the following code into the CSS editor:

/* Slim Pill Buttons for Read More Links */
.blog-more-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #74D8E4;
    color: white !important;
    padding: 10px 20px 10px 20px !important; /* Adjust padding for button size */
    border-radius: 50px;
    text-decoration: none;
    font-family: inherit;
    font-weight: bold;
    font-size: 0.8rem;
    line-height: 1;
    transition: background-color 0.3s ease, transform 0.2s ease;
    white-space: nowrap;
}

/* Hover effect */
.blog-more-link:hover {
    background-color: #3EBBCB;
    transform: translateY(-2px) rotate(-2deg); /* Slight tilt effect */
}

/* Remove Read More Underline */
.blog-more-link::after {
    display: none;
}

---

Step 4: Save Your Changes

Click Save in the CSS editor to apply the changes to your site. Refresh your site preview to see the effect live!

---

Optional customisations

Button Color
Adjust the button's background color by modifying the #74D8E4 value in background-color.

Text Color
Change the text color by updating the white value in color.

Padding
To make the button thicker or thinner, adjust the values in padding: 6px 15px.

Font Size
Modify the 0.8rem value in font-size to make the text larger or smaller.

Font Weight
Adjust the bold value in font-weight for a bolder or lighter text.

Hover Effect Color
Change the hover background color by modifying the #3EBBCB value in .blog-more-link:hover.

Button Height
Adjust the height of the button by modifying the 28px value in height.

Font Family
Change the font by editing the font-family: inherit; value.