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.

nickerwin.com

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
  • Views 6.3k
  • 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;
}

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

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

Archived

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

Guest
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.