HTML Redirecionamento para outra pagina

Pedrockz · 17 de novembro de 2020

Sou iniciante em HTML, preciso que o sistema responda ao clicar no botão ACESSAR redirecione o usuário para a pagina principal "index.html".

login.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Controle de Acesso</title>

    <link rel="stylesheet" href="css/style.css">

</head>
<body>
    <img class="blogin"src="img/bl.png" alt="">
<form class="form" action="">
    <div class="card">
        <div class="card-top">
            <img class="imgLogin"src="img/login.png" alt="">
            <h2 class="title">Painel de Controle</h2>
            <p>Gerenciar seu negócio</p>
        </div>

        <div class="card-group">
            <label>Email</label>
            <input type="email" name="email" placeholder="Digite seu email" required>
        </div>
        
        <div class="card-group">
            <label>Senha</label>
            <input type="password" name="senha" placeholder="Digite sua senha" required>
        </div>
        <div class="card-group">
            <label><input type="checkbox"> Lembre-me</label>
        </div>
        <div class="card-group btn">
            
            <button type="submit">ACESSAR</button>
        </div>
    </div>
</form> 

</body>
</html>

style.css

body{
    background-color: #d1d1d1;
    font-family: sans-serif;
}

.form{
    width: 400px;
    margin: auto;
    padding-top: 40px;
}

.card{
    box-shadow: 1px 1px 5px #ccc;
    background-color: white; 
    padding: 30px;
    border-radius: 8px;
}
.card-top{
    text-align: center;
}

.card-group{
    margin-bottom: 10px;
}

.card-group > label{
    width: 100%;
    color: #6d6d6d;
    display: block;
}

.card-group > input{
    border-radius: 5px;
    outline: 0;
    width: 100%;
    height: 20px;
    padding: 5px;
}

.card-group > button{
    background-color: #b60000;
    width: 100%;
    border-radius: 30px;
    padding: 15px;
    color: white;
    border: 0px;
    outline: 0;
}

.btn button:hove{
    background-color: #7e0000;
}

.imgLogin{
    border-radius: 50px;
    width: 100px;
    box-shadow: 5px 5px 10px #ccc;
}

.title{
    color: #b60000
}

Adriano_web · 17 de novembro de 2020

@Pedrockz Poderia ao invés do elemento <button> adicionar um elemento <a> com o atributo href especificando o URL de destino. Mas caso queira fazer somente utilizando o <button> poderia configurar a coisa toda com JS como segue:

Primeiro defini um identificador para o botão com o nome "btnLink":

<button type="submit" id="btnLink">ACESSAR</button>

Depois, com JS poderia dizer que ao clicar no botão com o ID especificado alterar o location(local) atual:

document.getElementById("btnLink").addEventListener("click", function() {
  location.assign("https://www.google.com/");
}, false);

Você poderia inserir esse script antes da tag de fechamento </body>:

<body>
  .. conteúdo  ..
  <script>
    document.getElementById("btnLink").addEventListener("click", function() {
      location.assign("URL que você quer acessar");
    }, false);
  </script>
</body>