Google+-Icon

Original: http://solemone.de/code/how-to-make-a-responsive-google-button-with-css3/

by Jens Grochtdreis

HTML

<a class="googleplus">Google+</a>

CSS

.googleplus {
    color: #fff;
    display: inline-block;
    font-family: sans-serif;
    line-height: 1.25;
    font-size: 1em; /* 16px - parent element has a font size of 16px */
    font-weight: bold;
    text-decoration: none;
    text-shadow: 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, .5); /* 1px / 16px = 0.0625 */
    border-bottom: 0.0625em solid rgba(0, 0, 0, .65);
    border-radius: 0.1875em; /* 3px / 16px = 0.1875 */
    box-shadow: 0 0.0625em 0.125em #000; /* 1px / 16px = 0.0625 && 2px / 16px = 0.125 */
    padding: 0.875em 1em 0.4375em 1em; /* 7px / 16px = 0.4375 && 16px = 1 */
    position: relative;
    background: #2d2d2d;
    background: -moz-linear-gradient(top, #2d2d2d 0%, #141414 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2d2d2d), color-stop(100%,#141414));
    background: -webkit-linear-gradient(top, #2d2d2d 0%,#141414 100%);
    background: -o-linear-gradient(top, #2d2d2d 0%,#141414 100%);
    background: -ms-linear-gradient(top, #2d2d2d 0%,#141414 100%);
    background: linear-gradient(top, #2d2d2d 0%,#141414 100%);
}
 
.googleplus:before {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 0.1875em; /* 3px / 16px = 0.1875 */
    margin-bottom: 1px;
    border-top: 0.0625em solid rgba(255, 255, 255, .2); /* 1px / 16px = 0.0625 */
    border-top-left-radius: 0.1875em; /* 3px / 16px = 0.1875 */
    border-top-right-radius: 0.1875em; /* 3px / 16px = 0.1875 */
    background: -moz-linear-gradient(left, #E52D39 0%, #E52D39 25%, #168BE6 25%, #168BE6 50%, #2AC700 50%, #2AC700 75%, #FC0 75%, #FC0 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E52D39), color-stop(25%,#E52D39), color-stop(25%,#168BE6), color-stop(50%,#168BE6), color-stop(50%,#2AC700), color-stop(75%,#2AC700), color-stop(75%,#FC0), color-stop(100%,#FC0));
    background: -webkit-linear-gradient(left, #E52D39 0%,#E52D39 25%,#168BE6 25%,#168BE6 50%,#2AC700 50%,#2AC700 75%,#FC0...