Jump to content

Five: Turning "Read More" link into a button.

Recommended Posts

I've been trying to figure out how I can make the "Read More" link on the Five Template to look more like a button. The way it is now, just doesn't stand out enough for my liking.


To give you an idea of what I want, here's a couple images.

This is what it is now.

alt text

This what I want it to look like along with the hover effect.

alt textalt text

Any ideas?

Link to comment
  • Replies 15
  • Created
  • Last Reply

Add the following to your Custom CSS Editor

a.inline-read-more {
display: inline-block;
width: auto;
height: auto;
padding: 1em 2.5em;
color: #FFF;
background-color: #272727;
border-width: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1em;
font-weight: normal;
font-style: normal;
text-transform: uppercase !important;
letter-spacing: 0px;
text-align: center;
text-decoration: none;
cursor: pointer;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size: 14px;
text-transform: none;

a.inline-read-more:hover {
background-color: #C0A127;

If you're looking for a Squarespace Developer, drop me a line. 

Link to comment
  • 3 months later...
  • 4 weeks later...
  • 1 year later...
  • 1 year later...


This topic is now archived and is closed to further replies.

This topic is now closed to further replies.
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.