Custom Read More Links

September 22, 2013

---

I’ve found that most WordPress home pages are fairly boring, especially if it’s heavy on content. Adding a bit of interactivity is a good way to liven things up. Here are some ways to customize your “read more” links for your WordPress theme – best of all, it doesn’t use JavaScript or jQuery – it’s all CSS3.

Before I go on any farther, I’ll give you fair warning that you’ll need to make the customizations to integrate these examples into your WordPress theme. This is not a “copy-and-paste” tutorial – every theme is unique and will require in-depth knowledge of PHP and WordPress. That said, this can also be integrated easily into other CMS platforms since this is using only CSS3, and does not require jQuery libraries or any JavaScript.

It’s All CSS3, You Say?

The first example uses a CSS-only triangle, and is displaced by utilizing the CSS3 transform:translate property:

CSS Triangle
====================
border-top:70px solid transparent;
border-right:70px solid gainsboro;

Hover State
====================
-webkit-transform: translate(-25px, -25px); /*Chrome + Safari*/
transform: translate(-25px, -25px); /*FF + IE */


The second example uses the transform:rotate property:

CSS Circle
====================
border-radius: 50%;
border: 40px solid gainsboro;

Original State
====================
-webkit-transform:rotate(-35deg); /*Chrome + Safari*/
transform:rotate(-35deg); /*FF + IE*/

Hover State
====================
-webkit-transform:rotate(-179.9deg); /*Chrome + Safari*/
transform:rotate(-179.9deg); /*FF + IE*/

Note: declaring a negative rotation results in a counter-clockwise transition. However, if you declare “-180deg”, it will rotate clockwise – I believe this is a small CSS3 bug. To get around this bug, declare a value just under -180deg and it’ll rotate in the right direction: counter-clockwise.

The last example uses the transform:translate property, but on the parent div to give it a scrolling effect:

Hover State
====================
-webkit-transform:translate(0, -50%); /*Chrome + Safari*/
transform:translate(0, -50%); /*FF + IE*/

Note: I threw the button div into the text div so that both would “scroll” simultaneously without extraneous CSS to transform both elements.

OK, Let’s See It In Action!

Rather Download The Files?

Downloads

Where Did You Get That Cool Background?

Subtle Patterns has one of the best collections of, well, subtle background patterns. Did I mention, they’re free? Thanks, Subtle Patterns!