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

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.

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

Any ideas?

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;
}

Thank you so much! You're amazing!

I have a summary of my blog on my index-page. Your code doesn't include that function, does it?

And another thing; Is there a way to change the "Read more" text to something in my own language?

If it is for the read-more-link of a summary try this inside custom CSS Editor:

.sqs-block-summary-v2 .summary-read-more-link:after {
 content: 'Les mer';
}

Hey, that worked. at least in the summary. Thx :-) Do you have a magic code for changing the "Read more" in the blog as well?

Hey, that worked. at least in the summary. Thx :-) Do you have a magic code for changing the "Read more" in the blog as well?

Glad if I can help. Might be this one:

.entry-more-link a::before { content: "Les mer"; }

If it's supposed to be in the same custom css editor as the summary, it doesn't work :-(

Once I was successful with this one inside the Footer Custom Code Area:

    Y.all('.inline-read-more').setHTML('Les mer');

The Footer Custom Code Area is the one under Settings, right? Pasted your code there, but no dice :-(

Can't seem to get this to work for Hudson.

Or Montauk. Any one go the magic to make this work on a Montauk blog? Thanks!

This code worked great for me. Is there a way to get the button to be aligned to the Right?

This code worked great for me. Is there a way to get the button to be aligned to the Right?

I was able to get the code for my summary blog page to work, but it will not change color on hover. Any ideas? Thanks.