CSS UpVote/DownVote

by Znuff

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla odio.</p>
<span class="icon-thumbs-up" onclick="javascript:ckratingKarma('542622', 'subtract', 'www.zoso.ro/wp-content/plugins/comment-rating/', '1_14_'" )>&#xF138;</span><span class="icon-thumbs-down" onclick="javascript:ckratingKarma('542622', 'subtract', 'www.zoso.ro/wp-content/plugins/comment-rating/', '1_14_')">&#xF139;</span>

<hr> 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vehicula.</p>
<span class="icon-thumbs-up">&#xF301;</span><span class="icon-thumbs-down">&#xF2Fe;</span>
    
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis.</p>
<span class="icon-thumbs-up">&#xF48A;</span><span class="icon-thumbs-down">&#xF48B;</span>
    
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam lobortis.</p>
<span class="icon-thumbs-up">&#xF31C;</span><span class="icon-thumbs-down">&#xF31D;</span>

CSS

/* Copy this font/style to your server */
@import url(https://dl.dropboxusercontent.com/u/120650/webfont/stylesheet.css);

/* Actual CSS for Icons */

span.icon-thumbs-down, span.icon-thumbs-up {
    font-family:'WebHostingHub-Glyphs';
    padding: 3px;
    margin: 5px 3px;
    border-radius: 6px;
    color: white;
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
    -o-box-shadow: 0 0 3px rgba(0, 0, 0, , 0.75);
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.75);
    cursor:pointer;
    transition: all linear 0.5s;
    -webkit-transition: all linear 0.5s;
    -moz-transition: all linear 0.5s;
    -o-transition: all linear 0.5s;
}
span.icon-thumbs-down:hover {
    color: red;
    background: white;
}
span.icon-thumbs-up:hover {
    color: green;
    background: white;
}
span.icon-thumbs-down {
    background: red;
}
span.icon-thumbs-up {
    background: green;
}

/* not important down here */   
p {
    margin-bottom: 5px;
}