我在 Google 商店网站上找到了这个按钮: https://store.google.com/?utm_source=hp_header&utm_medium=google_oo&utm_campaign=GS100042#social-modal
我想为我网站上的这两个按钮使用悬停动画:https://www.varomy.com/
Image of The Buttons on My Website
我应该添加或更改哪些 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>
关于html - 如何让我的 css 按钮像 Google 上的这个一样,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55409299/