Animate Your Boring Links With CSS

CSS3 can be great to make some simple but cool animation effects without the need for any JavaScript. This could be used to make links and buttons less boring and more eye catching.

Here I would like to share some effects especially made for your website menu or any links.

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.

Leave a Reply

Your email address will not be published. Required fields are marked *