Create the Google Button Effect with CSS

By David Walsh on July 26, 2018

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!

View Demo

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!

View Demo

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 David WalshApril 10, 2012

CSS Animations Between Media Queries

CSS animations are right up there with sliced bread. CSS animations are efficient because they can be hardware accelerated, they require no JavaScript overhead, and they are composed of very little CSS code. Quite often we add CSS transforms to elements via CSS during...

By David WalshSeptember 27, 2012

5 HTML5 APIs You Didn’t Know Existed

When you say or read "HTML5", you half expect exotic dancers and unicorns to walk into the room to the tune of "I'm Sexy and I Know It." Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature...

Incredible Demos

By David WalshAugust 8, 2011

jQuery Chosen Plugin

Without a doubt, my least favorite form element is the SELECT element. The element is almost unstylable, looks different across platforms, has had inconsistent value access, and disaster that is the result of multiple=true is, well, a disaster. Needless to say, whenever a developer goes...

By David WalshDecember 21, 2009

Create a Simple Slideshow Using MooTools

One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events.