Lego2012
12/7/2016 - 8:04 AM

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,

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

02-styles.css
content_copyfile_download
.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)
    }
}
01-index.html
content_copyfile_download
<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.

Demo: http://www.webtutorialsource.com/demo/animated-links-with-css/ 
-->