Animate Your Boring Links With CSS

CSS Animation On Rollover

Make your menu more interesting with this simple effect on rollover.

HTML

<nav id="menu">
    <ul>
        <li>
            <a href="/">
                <span data-label="Home" class="label">Home</span>
            </a>
        </li>
        <li>
            <a href="/info">
                <span data-label="Info" class="label">Info</span>
            </a>
        </li>
        <li>
            <a href="/contact">
                <span data-label="Us" class="label">Contact</span>
            </a>
        </li>
    </ul>
</nav>

The value in data-label will be used in the CSS to create a pseudo-element with ::after.

CSS

a {
    text-decoration: none;
    font-weight: 600;
    display: block;
    font-size: 1.2em;
    -webkit-transition: top .3s cubic-bezier(.20,.85,.45,1);
    -moz-transition: top .3s cubic-bezier(.20,.85,.45,1);
    transition: top .3s cubic-bezier(.20,.85,.45,1)
}

#menu a {
    position: relative;
    top: 0
}

#menu a .label {
    color: #999;
    line-height: 35px
}

#menu a .label::after {
    content: attr(data-label); /* Value from 'data-label' attribute */
    display: block;
    color: #25589a
}

#menu ul {
    height: 40px;
    overflow: hidden;
    background: #eee
}

#menu li {
    margin: 0 12px;
    float: left;
    list-style: none
}

#menu a:hover {
    top: -35px
}

Effective Call-To-Action Element

There are some roles to consider for an effective Call-To-Action button or link. The position on the page, the colours being used and the size of the button/link. It’s important that it stands out from the rest of the content so you get the best result. A clear and short message is also recommended such as “Join Now” or “Start Free Trail”. Adding some animation is another option to make it even more ‘attention grabber’.

HTML

<a href="/subscribe" class="button anim-link">
    <div class="animated moveUp">
        <span data-label="Subscribe Now" class="bt-label first">Subscribe Now</span>
    </div>
</a>

Here again we are using a data-label attribute but to get the best effect the value needs to be the same as the link anchor text.

CSS

You can use the same style for a tag than the previous effect.

.button {
    padding: 10px 15px;
    text-decoration: none;
    min-width: 80px;
    display: inline-block;
    border-radius: 3px;
    font-weight: bold;
    font-size: 20px;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, .3);
    -webkit-box-shadow: 0px 1px 3px 1px #ccc;
    -moz-box-shadow: 0px 1px 3px 1px #ccc;
    box-shadow: 0px 1px 3px 1px #ccc;
    background-color: #3278BC;
    color: #fff;
    border: 0;
    outline: none;
    height: 28px;
    overflow: hidden
}

.button:hover {
    background-color: #25649e
}

.animated {
    animation-fill-mode: both;
    overflow: hidden
}

.bt-label::after {
    content: attr(data-label)
}

.bt-label, .bt-label::after {
    display: block;
    line-height: 45px;
    margin-top: -9px
}

For the animation part CSS @keyframes in an infinite loop.

.animated.moveUp {
    /* I called the animation 'moveUp' which will last
    2 seconds and loop infinitely */
    -webkit-animation: moveUp 2s infinite;
    -moz-animation: moveUp 2s infinite;
    animation: moveUp 2s infinite
}

@-webkit-keyframes moveUp {
    0% {-webkit-transform: translate3d(0, 0, 0)}
    80% {-webkit-transform: translate3d(0, 0, 0)}
    100% {-webkit-transform: translate3d(0, -50%, 0)}
}

@-moz-keyframes moveUp {
    0% {-moz-transform: translate3d(0, 0, 0)}
    80% {-moz-transform: translate3d(0, 0, 0)}
    100% {-moz-transform: translate3d(0, -50%, 0)}
}

@keyframes moveUp {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    80% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    100% {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0)
    }
}

This effect is best for buttons or links but you can also use it on title/header. I wouldn’t recommend on entire paragraphs.

It’s a pretty simple animation but you can easily modify it if you want to. I’ve added two different animations in the demo.