[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 like poo 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

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 like poo 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

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