button css_使用CSS创建Google Button效果

button css

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.

我总是觉得Google的品牌很简单，但是逐渐意识到这就是他们设计的美。 关于“足够”的东西是平淡无奇和高处之间的完美平衡。 GMail的设计多年来已经变老了，Google才开始更新其设计，这与Google的设计模式相同：足够简单，但又有一点点天赋。

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!

我真正喜欢的部分功能是其新的按钮设计，您可以通过其“立即删除所有垃圾邮件”按钮(在查看“垃圾箱”文件夹时)以及类似的按钮进行查看。 按钮是扁平的(看起来像一个链接)，但是动画的背景效果是如此简单而优雅，我什至无法解释这种感觉。 效果似乎比简单的text-decoration更改“重”得多。 让我们研究一下CSS以实现效果！

View Demo 观看演示

HTML (The HTML)

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

“按钮”仅需要一个HTML元素： <span> ：

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

CSS (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:

可以用一个HTML元素实现效果，因为我们使用::before伪元素。 我将样式隔离为仅所需的样式：

/* 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:

请注意，比例和不透明度为0，因此不可见。 然后简单的:hover CSS开始效果：

.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!

大多数效果是由::before设置的， ::before :hover所需要做的就是提升不透明度并缩放到正常大小！

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!

我无法解释为什么我这么爱这个按钮，这似乎是成功，简单设计的标志。 我认为我非常喜欢该按钮，因为效果非常轻巧，但仍具有动画效果。 无论如何，请使用按钮，如果您看到改进，请告诉我！

翻译自: https://davidwalsh.name/google-button

button css