I always found ’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 just got around to updating its design and it’s true to the design pattern:  simple enough with a bit of flair.


of the flair I really enjoy is their new design, which you can see with their “Delete all SPAM now” (when looking at the Trash folder) and likewise buttons.  The is flat (it looks like a link) but the animated background is so simple and elegant that I can’t even explain the feeling; it’s almost as though the is less “heavy” than a simple text-decoration change.  Let’s examine the 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!




Source link
thanks you RSS link
( https://davidwalsh.name/google-button)

LEAVE A REPLY

Please enter your comment!
Please enter your name here