Sign in with Google button

I came across a design for a "Sign in with Google" button created by Simon Raczka on Dribbble (http://drbl.in/fEkQ) and I wanted to see if I could re-create it in HTML/CSS.

by Derek Collins

HTML

<a href="#" class="sign-in-with-google"><span>Sign in with <strong>Google</strong></span></a>

CSS

body {
    background-color: #363f61;
    margin-top: 30%;
    text-align: center;
}

.sign-in-with-google {
    background: #f3f3f3;
    border-top: 6px solid #F90101; /* Red */
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0,0,0,.2);
    color: #5b5b5b;
    display: inline-block;
    font: 300 14px/normal 'Helvetica Neue', Helvetica, sans-serif;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 1px #fff;
    /* Optional: Provides background transition on hover */
    -webkit-transition: background .15s linear;
    -moz-transition: background .15s linear;
    -ms-transition: background .15s linear;
    -o-transition: background .15s linear;
    transition: background .15s linear;
}
/* Add a highlight to the top of the button */
.sign-in-with-google:after {
    border-top: 1px solid rgba(255,255,255,.3);
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    top: -6px;
    width: 100%;
}
.sign-in-with-google:before {
    background: #F2B50F; /* Yellow */
    border-top-right-radius: 4px;
    content: '';
    display: block;
    height: 6px;
    position: absolute;
    right: 0;
    top: -6px;
    width: 50%;
}
.sign-in-with-google span {
    display: inline-block;
    padding: 12px 40px;
}
.sign-in-with-google span:before {
    background: #0266C8; /* Blue */
    content: '';
    display: block;
    height: 6px;
    position: absolute;
    right: 50%;
    top: -6px;
    width: 25%;
}
.sign-in-with-google span:after {
    background: #00933B; /* Green */
    content: '';
    display: block;
    height: 6px;
    left: 50%;
    position: absolute;
    top: -6px;
    width: 25%;
}
.sign-in-with-google strong {
    font-weight: 500;
}
.sign-in-with-google:hover {
    background: #dbdbdb;
}
.sign-in-with-google:active {
    background: #f3f3f3;
}