html - 如何让我的 css 按钮像 Google 上的这个一样

标签 html css

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

Image of The Google Button

我想为我网站上的这两个按钮使用悬停动画: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/

相关文章:

javascript - 解释 $(this)

javascript - 在javascript中用正则表达式替换字符串中的数字

html - 如何多个div淡出淡入循环动画

html - 添加限制以修复侧边栏

javascript - javascript 切换显示/隐藏按钮适用于小规模,但不适用于我的较大 HTML 代码

html - & 或 & 如果我们在 XHTML 文档中使用 UTF-8,&(符号)应该使用什么?

javascript - 使用 Scrollmagic 补间文本框的不透明度

javascript - 如何将悬停效果添加到嵌套到悬停元素的元素?

javascript - 在 javascript 中访问 #titlebar (chrome) "--chrome-background-color"的 mozilla 特定 CSS 属性

html - 当屏幕尺寸改变时,如何调整这些导航栏元素的位置?