cms_templates/hearinghealthfoundation/css/simple.css

.sqs-simple-like {
    cursor: pointer;
    display: inline-block;
    line-height: 18px;
    -webkit-user-select: none
}

.sqs-simple-like .like-icon {
    background: #999 url(//assets.squarespace.com/universal/images-v6/comments/icon_like_12_light.png) 50% no-repeat;
    background-size: 10px;
    border-radius: 50%;
    display: block;
    float: left;
    height: 18px;
    margin-right: 5px;
    transition: background-color,opacity .5s ease-out;
    width: 18px
}

.sqs-simple-like:hover .like-icon {
    animation: beat 1s infinite;
    animation-timing-function: ease-out;
    background-color: #d10000
}

.sqs-simple-like.float .like-icon {
    animation: float 2s infinite;
    animation-iteration-count: 1;
    animation-timing-function: ease-out;
    background-color: #d10000
}

.sqs-simple-like.clicked .like-icon {
    animation: none;
    background-color: #d10000;
    transition: all 1s ease-in-out
}

@keyframes float {
    0% {
        animation-timing-function: ease-in;
        opacity: 0;
        transform: scale(1.15)
    }

    30% {
        animation-timing-function: linear;
        opacity: .6
    }

    60% {
        animation-timing-function: linear;
        opacity: .8;
        transform: scale(1.45)
    }

    to {
        animation-timing-function: ease-out;
        opacity: 0
    }
}

@keyframes beat {
    0% {
        transform: scale(1)
    }

    10% {
        transform: scale(1.25)
    }

    20% {
        transform: scale(1.1)
    }

    30% {
        transform: scale(1.25)
    }

    to {
        transform: scale(1)
    }
}