ATTENZIONE: Ho un GROSSO PROBLEMA CON I CSS !! - AIUTATEMI!
Salve a tutti, è da un paio di giorni che stavo cercando di creare/modificare lo stile, l'aspetto grafico dei miei form login e register; per farlo bisogna usare i css style, ma non sono capace e non ho trovato su internet cose chiare su come dare ad esempio al bottone REGISTRATI o ENTRA, un colore, una forma o persino l'animazione ombra ect..
cose simili..
-AIUTATEMI, GRAZIE INFINITE..!!!
register.html
Codice HTML:
<!DOCTYPE html>
<html>
<head>
<title>Registrazione</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<form method="post" action="/php/register.php">
<h1>Registrazione</h1>
<input type="text" id="username" placeholder="Username" name="username" maxlength="50" required>
<input type="password" id="password" placeholder="Password" name="password" required>
<button type="submit" name="register">Registrati</button>
</form>
</body>
</html>
login.html
Codice HTML:
<html>
<head>
<title>Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<form method="post" action="/php/login.php">
<h1>Login</h1>
<input type="text" id="username" placeholder="Username" name="username">
<input type="password" id="password" placeholder="Password" name="password">
<button type="submit" name="login">Accedi</button>
</form>
</body>
</html>
style.css degli due form: [PRATICAMENTE NULLA DI GRAFICO]
Codice HTML:
html,body {
padding: 0;
margin: 0;
font: 14px 'Open sans', sans-serif;
color: #333;
}
h1 {
margin: 0;
margin-bottom: 20px;
font-size: 24px;
}
form {
padding: 40px;
background: #DDD;
border: 4px solid #AAA;
width: 360px;
margin: 30px auto;
}
input {
font: 14px 'Open Sans', sans-serif;
border: 2px solid #ccc;
padding: 6px;
display: block;
margin-bottom: 10px;
width: 96%;
}
button {
font: 14px 'Open Sans', sans-serif;
background-color: #4285f4;
color: white;
padding: 6px;
cursor: pointer;
border: none;
margin-top: 10px;
text-transform: uppercase;
}
