如何使我的 css 按钮成为 Google 上的这个按钮答案

【问题标题】：How to make my css button to be like this one on Google如何使我的 css 按钮成为 Google 上的这个按钮
【发布时间】：2019-03-29 01:34:27
【问题描述】：

我在 Google 商店网站上找到了这个按钮： https://store.google.com/?utm_source=hp_header&utm_medium=google_oo&utm_campaign=GS100042#social-modal

Image of The Google Button

我想将 HOVER ANIMATION 用于我网站上的这两个按钮：https://www.varomy.com/

Image of The Buttons on My Website

我应该添加或更改哪些 CSS 代码？

谢谢！

【问题讨论】：

这在我看来就像Ripple from Google's Material library。请参阅demo page。

标签： html css

【解决方案1】：

使用background试试这个

.btn_g {display:block;position:relative;width:46px;height:46px;border:2px solid #000;border-radius:50%;transition:.2s}
.btn_g:before {position:absolute;top:16px;left:16px;content:'';width:15px;height:15px;background:url(https://mannequin.storage.googleapis.com/2018/modal/exit.svg) no-repeat}
.btn_g:hover {background-color:#000}
.btn_g:hover:before {background-image:url(https://mannequin.storage.googleapis.com/2018/modal/exit-white.svg)}

HTML：

<a href="#none" class="btn_g"></a>

【讨论】：

【解决方案2】：

您可以使用background, transition 和transform。

.btn_g {display:block;position:relative;width:46px;height:46px;border:2px solid #000;border-radius:50%;overflow:hidden}

.btn_g:after {position:absolute;top:0;left:0;z-index:1;width:46px;height:46px;background:#000;content:'';
    transform-origin: center center;
    transform: scale3d(0.8, 0.8, 0.8);
    transition:.2s;
    opacity:0;
    border-radius:50%;
}

.btn_g:hover:after {
    transform: scale(1);
    opacity:1;
}

.btn_g:before {position:absolute;top:16px;left:16px;z-index:10;content:'';width:15px;height:15px;background:url(https://mannequin.storage.googleapis.com/2018/modal/exit.svg) no-repeat}
.btn_g:hover:before {background-image:url(https://mannequin.storage.googleapis.com/2018/modal/exit-white.svg)}

&lt;a href="#none" class="btn_g"&gt;&lt;/a&gt;

【讨论】：

我需要悬停动画，而不仅仅是一张图片
还是不一样。我希望黑色部分从中间扩展
@VictorLi 请再检查一次！
@VictorLi 我的荣幸 :)
嗨，我刚刚调整了我的网站。现在它可以工作了，但是在我的网站上，悬停时不显示按钮中的文本。 varomy.com。你能帮我解决这个问题吗？