Как сделать так, чтобы моя кнопка css была такой же в Google

Question

Я нашел эту кнопку на сайте Google Store: https://store.google.com/?utm_source=hp_header&utm_medium=google_oo&utm_campaign=GS100042#social-modal

Изображение кнопки Google

Я хочу использовать HOVER ANIMATION для этих двух кнопок на моем веб-сайте: https://www.varomy.com/

Изображение кнопок на моем сайте

Какие коды CSS я должен добавить или изменить?

Спасибо!

Answer 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>

Answer 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)}

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