Блог

Я нашел эту кнопку на веб-сайте магазина Google: https://store.google.com/?utm_source=hp_headeramp;utm_medium=google_ooamp;utm_campaign=GS100042#social-modal

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

Я хочу использовать эту АНИМАЦИЮ НАВЕДЕНИЯ на эти две кнопки на моем веб-сайте:https://www.varomy.com

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

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

Спасибо!

Просто попробуйте это с помощью 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>
  

Вы можете использовать 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>