登录界面两个登录按钮代码
时间: 2023-12-07 19:03:12 浏览: 13
以下是两个登录按钮的代码示例:
1. 使用HTML和CSS实现两个不同样式的登录按钮:
```html
<!DOCTYPE html>
<html>
<head>
<title>Two Login Buttons</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #3e8e41;
}
.button2 {
background-color: #f44336; /* Red */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}
.button2:hover {
background-color: #d32f2f;
}
</style>
</head>
<body>
<button class="button">Login</button>
<button class="button2">Login with Facebook</button>
</body>
</html>
```
2. 使用JavaScript实现两个不同功能的登录按钮:
```html
<!DOCTYPE html>
<html>
<head>
<title>Two Login Buttons</title>
<script>
function login() {
// Code to perform login action
alert("Login successful!");
}
function loginFacebook() {
// Code to perform login with Facebook action
alert("Login with Facebook successful!");
}
</script>
</head>
<body>
<button onclick="login()">Login</button>
<button onclick="loginFacebook()">Login with Facebook</button>
</body>
</html>
```
注意:以上代码仅作为示例,具体的实现方式可以根据实际需求进行调整。