HTML和CSS-自定义Facebook登录按钮

所以我想拥有我自己的facebook登录按钮，而不是我想要的默认按钮。我很接近，但我不知道遗漏了什么，以下是我迄今为止所做工作的简要介绍：

。登录facebook文本{
对齐项目：居中；
边框底色：rgb（59,89,152）；
边框底部样式：实心；
边框底宽：1px；
边界图像开始：0px；
边界图像重复：拉伸；
边界图像切片：100%；
边界图像源：无；
边框图像宽度：1；
左边框颜色：rgb（59,89,152）；
左边框样式：实心；
左边框宽度：1px；
右边框颜色：rgb（59,89,152）；
右边框样式：实心；
右边框宽度：1px；
边框顶部颜色：rgb（59、89、152）；
边框顶部样式：实心；
边框顶部宽度：1px；
颜色：rgb（59,89,152）；
光标：指针；
显示器：flex；
字体系列：Helveticaneuw01-55罗马，Helveticaneuw02-55罗马，Helveticaneuw10-55罗马，无衬线；
字体大小：16px；
字体拉伸：正常；
字体风格：普通；
字体变体大写：正常；
东亚字体变体：正常；
字体变体连字：正常；
字体变量数字：正常；
字体大小：400；
高度：46px；
证明内容：中心；
字母间距：正常；
线高：24px；
文本对齐：居中；
文本缩进：0；
文本呈现：自动；
文本阴影：无；
文本转换：无；
转换延迟：0s；
过渡时间：0.3s；
过渡性质：背景；
过渡时间功能：轻松；
宽度：239px；
字距：0；
书写方式：水平tb；
-webkit字体平滑：抗锯齿；
}
.登录facebook图标{
对齐项目：居中；
背景色：rgb（59,89,152）；
颜色：rgb（255、255、255）；
光标：指针；
显示器：flex；
字体系列：Arial，无衬线；
字体大小：23px；
字体拉伸：正常；
字体风格：普通；
字体变体大写：正常；
东亚字体变体：正常；
字体变体连字：正常；
字体变量数字：正常；
字体大小：400；
高度：48px；
证明内容：中心；
字母间距：正常；
线高：正常；
文本对齐：居中；
文本缩进：0；
文本呈现：自动；
文本阴影：无；
文本转换：无；
宽度：58px；
字距：0；
书写方式：水平tb；
-webkit字体平滑：抗锯齿；
}

f
继续使用Facebook

希望下面的代码有帮助。我检查了Wix网站，我清理了你从Wix那里得到的风格。对于“f”，Wix使用的是图标字体而不是常规文本，您可能希望从fontawesome等图标提供商处获得

.login按钮{
显示：内联块；
光标：指针；
}
.登录按钮：悬停{
背景：rgba（59,89,152,1）；
}
.登录facebook图标{
背景色：#3b5998；
颜色：#fff；
字体系列：Arial，无衬线；
字体大小：400；
字体大小：36px；
线高：48px；
文本对齐：居中；
高度：48px；
宽度：58px；
浮动：左；
}
.登录facebook文本{
颜色：#3b5998；
字体系列：Helveticaneuw01-55罗马，Helveticaneuw02-55罗马，Helveticaneuw10-55罗马，无衬线；
字体大小：16px；
字体大小：400；
线高：46px；
文本对齐：居中；
宽度：239px；
高度：46px；
左侧填充：58px；
边框：1px实心#3b5998；
}

F
继续使用Facebook

元素不在同一行，因为它们是块级别的

元素。没有“悬停”动画，因为您没有制作。至于

f

，增加字体大小？非常感谢，我会在Fontsome中添加一个“f”