Create the Google Button Effect with CSS

By  on  

I always found Google's branding simple but grew to realize that was the beauty in their design; there's something about "just enough" that is the perfect balance between bland and over the top.  GMail's design grew old over the years and Google just got around to updating its design and it's true to the Google design pattern:  simple enough with a bit of flair.

Part of the flair I really enjoy is their new button design, which you can see with their "Delete all SPAM now"button (when looking at the Trash folder) and likewise buttons.  The button is flat (it looks like a link) but the animated background effect is so simple and elegant that I can't even explain the feeling; it's almost as though the effect is less "heavy" than a simple text-decoration change.  Let's examine the CSS to make the effect happen!

The HTML

The "button" requires only one HTML element:  a <span>:

<span class="google-button">Click here!</span>

The CSS

The effect can be accomplished with one HTML element because we use a ::before pseudo-element.  I've isolated the styles down to only those that are required:

/* The core button */
.google-button {
    align-items: center;
    border: none;
    display: inline-flex;
    justify-content: center;
    outline: none;
    position: relative;
    z-index: 0;
    -webkit-font-smoothing: antialiased;
    background: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0 8px;
    white-space: pre-wrap;
}

/* ::before, which will become the hover effect */
.google-button::before {
        content: '';
    display: block;
    opacity: 0;
    position: absolute;
    transition-duration: .15s;
    transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
    z-index: -1;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    background: #4285f4;
    border-radius: 4px;
    transform: scale(0);
    transition-property: transform,opacity;
}

Notice the scale and opacity are 0 so as to be invisible.  And then the simple :hover CSS to kick off the effect:

.google-button:hover::before {
    opacity: .06;
    transform: scale(1);
}

Most of the effect is setup by the ::before that all the :hover needed to do was lift opacity and scale to normal size!

I can't explain why I love this button so much, and that seems like a hallmark of a successful, simple design.  I think I love the button so much because the effect is incredibly lightweight but still animated.  In any event, enjoy the button and let me know if you see improvements!

Recent Features

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

  • By
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    MooTools Documentation Search Favelet

    I'm going to share something with you that will blow your mind: I don't have the MooTools documentation memorized. I just don't. I visit the MooTools docs frequently to figure out the order of parameters of More classes and how best to use...

  • By
    Create Spinning, Fading Icons with CSS3 and MooTools

    A goal of my latest blog redesign was to practice what I preached a bit more;  add a bit more subtle flair.  One of the ways I accomplished that was by using CSS3 animations to change the display of my profile icons (RSS, GitHub, etc.)  I...

Discussion

    Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!