我正在尝试创建一个身份验证站点,但是我想将登录按钮设置为多种语言,所以我想创建一个按钮,该按钮的功能与其他语言相同。
这是我要克隆的按钮
firebase.auth.GoogleAuthProvider.PROVIDER_ID
我希望有人告诉我如何制作此按钮
body {
padding: 2em;
}
/* Shared */
.loginBtn {
box-sizing: border-box;
position: relative;
/* width: 13em; - apply for fixed size */
margin: 0.2em;
padding: 0 15px 0 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}
/* Google */
.loginBtn--google {
/*font-family: "Roboto", Roboto, arial, sans-serif;*/
background: #DD4B39;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}
<button class="loginBtn loginBtn--google">Login with Google</button>
答案 0 :(得分:0)
好吧,我认为用JSON做翻译器比制作这么多按钮或元素要容易得多。像这样:
// Foreach language, a Json object
// Foreach node element, a key in Json (I reccomend to use it ID)
var json = [
{
"lang" : "en",
"googleBtn" : "Login with Google"
},
{
"lang" : "pt",
"googleBtn" : "Logar com Google"
},
{
"lang" : "es",
"googleBtn" : "Logar con Google"
}
]
window.onload = function(){
var btn = document.getElementById("googleBtn");
var lang = document.getElementById("lang");
// When change the language
lang.onchange = function(){
for (var i = 0; i < json.length; i++){
if (json[i].lang == lang.value){
content = json[i]; // Catch what language it is
}
}
btn.innerHTML = content.googleBtn; // Rewrite texts
};
};
/* I just used your code here */
.loginBtn {
box-sizing: border-box;
position: relative;
/* width: 13em; - apply for fixed size */
margin: 0.2em;
padding: 0 15px 0 46px;
border: none;
text-align: left;
line-height: 34px;
white-space: nowrap;
border-radius: 0.2em;
font-size: 16px;
color: #FFF;
}
.loginBtn:before {
content: "";
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 34px;
height: 100%;
}
.loginBtn:focus {
outline: none;
}
.loginBtn:active {
box-shadow: inset 0 0 0 32px rgba(0, 0, 0, 0.1);
}
/* Google */
.loginBtn--google {
/*font-family: "Roboto", Roboto, arial, sans-serif;*/
background: #DD4B39;
}
.loginBtn--google:before {
border-right: #BB3F30 1px solid;
background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
}
.loginBtn--google:hover,
.loginBtn--google:focus {
background: #E74B37;
}
<div>
<select id="lang">
<option value="en" selected>English</option>
<option value="pt">Português</option>
<option value="es">Español</option>
</select>
</div>
<button class="loginBtn loginBtn--google" id="googleBtn">Login with Google</button>