Pages

Thursday, June 2, 2011

[HOW TO] Make a nicer +1 button that looks more like other social network sharing buttons

CSS:
div.gradientMediumGrey {
background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#F5F5F5), to(#D0D0D0));
/*background: -webkit-gradient(linear, left bottom, left top, from(#bbd), to(#dedede));
    background-color: #eee;
    background: -moz-linear-gradient(bottom, #bbd, #dedede);*/
}
div.mediumRoundedCorners {
-webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}
div.shadow {
box-shadow:2px 2px 2px rgba(0, 0, 0, 0.5);
HTML:
<div class="mediumRoundedCorners gradientMediumGrey shadow" style="height: 40px; width:40px; position: absolute; border-color: #CCCCCC; border-width: 2px; border-style: solid;">
<div style="position: relative; top: 28%; width: 32px; height:20px; margin: auto;"><div class="g-plusone" data-size="medium" data-count="false" ></div></div> 
</div> 
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
I just hacked this together, so no complains that it looks shit or something.. adjust it just as you like :) It is ugly ugly ugly code, I know. Still: Have fun.

Oh, and here is how it looks like:


Discuss on Buzz

No comments:

Post a Comment