Przycisk logowania przesuwa się po najechaniu myszką

pytanie zadane 10 lutego 2022 w HTML i CSS przez oleksik Użytkownik (590 p.)
edycja 10 lutego 2022 przez ScriptyChris

Hejka, mam pytanie gdzie zrobiłem błąd pisząc logowanie do strony głównej w html i css. Poniżej daje linijki kodu z błędem. Po na najechaniu na przycisk login na samym dole on dziwnie sie przesuwa

I daje jeszcze kod.

Najpierw HTML

<!DOCTYPE html>
<html lang="pl">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>login</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <form autocomplete="off">
            <div class="form__input-container">
                <input id="user" type="text" placeholder="User"/>
                <label for="user">User</label>
            </div>
            <div class="form__input-container">
                <input id="password" type="password" placeholder="Password" />
                <label type="password">Password</label>
            </div>   
            <button>Login</button>         
        </form>
    </body>
</html>

A teraz CSS

:root {

    --color-dark: #361999;

    --color-light: #78fff1;

}



*{

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



body {

    align-items: center;

    background: linear-gradient(

        to top right,

        var(--color-dark),

        var(--color-light)

    );

    display: flex;

    font-family: Helvetica, sans-serif;

    font-size: 24px;

    height: 100vh;

    justify-content: center;

    width: 100vw;  

}



form {

    background: linear-gradient(

        to left,

        rgba(255, 255, 255, 0.05),

        rgba(255, 255, 255, 0.35)

    );

    border-radius: 15px;

    box-shadow: 0px 8px 24px 0 rgba(0, 0, 0, 0.3);

    max-width: 300px;

    padding: 36px 24px;

    text-align: center;

}



.form__input-container {

    margin-bottom: 32px;

    position: relative;

}





input,

button {

    background: linear-gradient(

        to left,

        rgba(255, 255, 255, 0.1),

        rgba(255, 255, 255, 0.25)

    );

    border: none;

    border-radius: 18px;

    box-shadow: 0px 8px 24px o rgba(0, 0, 0, 0.3);

    color: rgb(255, 255, 255);

    font-size: 24px;

    padding: 12px 24px;

    transition: box-shadow 0.3s;

}



input {

    margin-bottom: 32px;

    width: 100%;

}



label{

    color: rgb(255, 255, 255);

    cursor: text;

    left: 24px;

    opacity: 1;

    position: absolute;

    top: 50%;

    transform: translateY(-100%);

    transition: left 0.3s, opacity 0.3s;

}



input:focus + label,

input:not(:placeholder-shown) + label {

    left: 1000px;

    opacity: 1;

}



input:focus,

button:focus {

    box-shadow: 0px 8px 12px 0 rgba(255, 255, 255, 0.3);

}



button {

    cursor: pointer;

    overflow: hidden;

    position: relative;

}



button:after {

    background: rgba(255, 255, 255, 0.5)

    content: "";

    display: block;

    height: 100px;

    left: -70 px;

    position: absolute;

    top: -50%;

    transform: skewX(-15deg);

    transition: left 0.15s linear;

    width: 50px;

}



button:hover {

    left: 110%;

}

Dobra to już tyle. Mam nadzieje że komuś uda sie rozwiązać ten problem.

komentarz 10 lutego 2022 przez CubeStorm Pasjonat (15,020 p.)

Zastanawia cię dlaczego input przesuwa się w prawo?

input:focus + label,
 
input:not(:placeholder-shown) + label {
 
    left: 1000px;
 
    opacity: 1;
 
}

Przez właściwość left. Kod na górze odpowiada za kliknięcie a za najechanie:

button:hover {
 
    left: 110%;
 
}

komentarz 10 lutego 2022 przez VBService Ekspert (253,340 p.)
edycja 10 lutego 2022 przez VBService

<label type="password">Password</label>

chyba miałeś na myśli atrybut for

dodałbym do body w css-ie

 overflow: hidden;

skoro napisałeś

label{
 
    color: rgb(255, 255, 255);
 
    cursor: text;
 
    left: 24px;
 
    opacity: 1;
 
    position: absolute;
 
    top: 50%;
 
    transform: translateY(-100%);
 
    transition: left 0.3s, opacity 0.3s;
 
}

opacity: 1; i transition: left 0.3s, opacity 0.3s;

to chyba w

input:focus + label,
 
input:not(:placeholder-shown) + label {
 
    left: 1000px;
 
    opacity: 1;
 
}

powinno być opacity: 0; żeby uzyskać transition: ..., opacity 0.3s;

Po na najechaniu na przycisk login na samym dole on dziwnie sie przesuwa

usuń (lub zmień, nie wiem do końca co chciałeś tym osiągnąć) left: 110%; z

button:hover {
 
    left: 110%;
 
}

dodaj atrybut name do

<input id="user" type="text" name="user" placeholder="User"/>

<input id="password" type="password" name="password" placeholder="Password" />

17.13.2 Successful controls

Every successful control has its control name paired with its current value as part of the submitted form data set.

komentarz 10 lutego 2022 przez oleksik Użytkownik (590 p.)

dalej nie działa

komentarz 10 lutego 2022 przez VBService Ekspert (253,340 p.)

dalej nie działa

co jeszcze nie działa?

proponowane zmiany

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>login</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <form autocomplete="off" method="post">
      <div class="form__input-container">
        <input id="user" type="text" name="user" placeholder="User"/>
        <label for="user">User</label>
      </div>
      <div class="form__input-container">
        <input id="password" type="password" name="password" placeholder="Password" />
        <label for="password">Password</label>
      </div>   
      <button>Login</button>         
    </form>
  </body>
</html>

:root {
 
    --color-dark: #361999;
 
    --color-light: #78fff1;
 
}
 
 
 
*{
 
    box-sizing: border-box;
 
    margin: 0;
 
    padding: 0;
 
}
 
 
 
body {
 
    align-items: center;
 
    background: linear-gradient(
 
        to top right,
 
        var(--color-dark),
 
        var(--color-light)
 
    );
 
    display: flex;
 
    font-family: Helvetica, sans-serif;
 
    font-size: 24px;
 
    height: 100vh;
 
    justify-content: center;
 
    width: 100vw;
  
    overflow: hidden; /* dodane */
 
}
 
 
 
form {
 
    background: linear-gradient(
 
        to left,
 
        rgba(255, 255, 255, 0.05),
 
        rgba(255, 255, 255, 0.35)
 
    );
 
    border-radius: 15px;
 
    box-shadow: 0px 8px 24px 0 rgba(0, 0, 0, 0.3);
 
    max-width: 300px;
 
    padding: 36px 24px;
 
    text-align: center;
 
}
 
 
 
.form__input-container {
 
    margin-bottom: 32px;
 
    position: relative;
 
}
 
 
 
 
 
input,
 
button {
 
    background: linear-gradient(
 
        to left,
 
        rgba(255, 255, 255, 0.1),
 
        rgba(255, 255, 255, 0.25)
 
    );
 
    border: none;
 
    border-radius: 18px;
 
    box-shadow: 0px 8px 24px o rgba(0, 0, 0, 0.3);
 
    color: rgb(255, 255, 255);
 
    font-size: 24px;
 
    padding: 12px 24px;
 
    transition: box-shadow 0.3s;
 
}
 
 
 
input {
 
    margin-bottom: 32px;
 
    width: 100%;
 
}
 
 
 
label{
 
    color: rgb(255, 255, 255);
 
    cursor: text;
 
    left: 24px;
 
    opacity: 1;
 
    position: absolute;
 
    top: 50%;
 
    transform: translateY(-100%);
 
    transition: left 0.3s, opacity 0.3s;
 
}
 
 
 
input:focus + label,
 
input:not(:placeholder-shown) + label {
 
    left: 1000px;
 
    opacity: 0; /* zmienione */
 
}
 
 
 
input:focus,
 
button:focus {
 
    box-shadow: 0px 8px 12px 0 rgba(255, 255, 255, 0.3);
 
}
 
 
 
button {
 
    cursor: pointer;
 
    overflow: hidden;
 
    position: relative;
 
}
 
 
 
button:after {
 
    background: rgba(255, 255, 255, 0.5)
 
    content: "";
 
    display: block;
 
    height: 100px;
 
    left: -70 px;
 
    position: absolute;
 
    top: -50%;
 
    transform: skewX(-15deg);
 
    /* transition: left 0.15s linear; */
 
    width: 50px;
 
}
 
 
 
button:hover {
 
    /* left: 110%; */
 
}