Blog categories in Squarespace 7.1 appear as plain text links. You can transform them into pill-shaped badges with background colors, rounded corners, and hover effects.
Target .blog-categories-list a for the category links. A subtle background with contrasting text and a hover state makes categories look clickable and polished.
.blog-categories-list a,
.blog-meta-item--categories a {
background-color: #f0f0f0;
color: #333 !important;
padding: 4px 12px;
border-radius: 20px;
font-size: 12px !important;
font-weight: 500;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.5px;
transition: all 0.2s ease;
}
.blog-categories-list a:hover,
.blog-meta-item--categories a:hover {
background-color: #e63946;
color: #ffffff !important;
}Generate category badge styles with our Button GeneratorTry it free →
