5

Tenho um formulário que recebeu display: flex, e dentro dele tem 3 inputs: um de nome, um de senha e um botão, além de um h1 escrito 'login'.

Quando passo o mouse sobre os elementos, o height e o width aumentam, só que o elemento de cima do elemento que aumenta não fica parado, ele vai para cima.

Queria saber se tem algum comando que eu possa usar para ele permitir a sobreposição das margens e não ir pra cima.

Código:

*{color: white}

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0)
}

.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}

.nome{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.nome:hover, .nome:focus{
    border: solid 3px rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.nome::placeholder{
    font-family: cursive; 
    text-align: center;
}

.senha{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.senha:hover, .senha:focus{
    border: solid 3px  rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.senha::placeholder{
    font-family: cursive; 
    text-align: center;
}

.enviar{
    background:rgb(29, 172, 0);
    border-radius: 15px;
    border: solid 1px rgb(29, 172, 0);
    border-radius: 15px;
    color: white;
    padding: 6px 20px;
    border-radius: 200px;
    color: black;
    font-family: cursive;
    font-weight: bold
}

.enviar:hover{
    padding: 20px 36px;
    transition: ease-in-out 70ms;
}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Formulário estilizado 01</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css">
    <script src="scripts.js"></script>
</head>
<body>
    <form method="POST" class="formulario">
     <h1 class="login">LOGIN</h1>
     <input type="text" class="nome" placeholder="nome">
     <input type="password" class="senha" placeholder="senha">
     <input type="submit" value="enviar" class="enviar">

    </form>
    
    <script>
    </script>
</body>
</html>

2
  • 2
    Amigo só o seu relato não ajuda muito a te responder, só no chute! Por favor edite sua pergunta e inclua o CSS e o HTML desse form etc
    – hugocsl
    Commented 25/02/2019 às 12:47
  • obg, amigo. já editei e coloquei meu código css, pode me ajudar?
    – lucas F
    Commented 25/02/2019 às 12:55

2 Respostas 2

3

Apesar do código não ter ficado muito bonito pq fiz na correria acho que pode te ajudar.

A ideia aqui é envolver o input em uma label, por questão de semântica, e tb para poder usar um pseudo elemento na label, já que não é possível aplicar diretamente no input um pseudo elemento.

inserir a descrição da imagem aqui

Nesse pseudo elemento ::after é que eu vou aplicar esse efeito que vc quer, no caso eu usei transform:scale() apenas para agilizar, mas vc pode usar valores em heigth e width nele se preferir. Assim vc vai aplicar os efeito no ::after do label, e não diretamente no input.

Segue o modelo. Sugiro que de uma analisada no código, pois como falei ele pode andar ser melhorado, fiz esse modelo apenas para te explicar o conceito...

*{color: white}

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0);
    position: relative;
    z-index: 2;
}

.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}


label:last-child {
    color: black;
    font-family: cursive;
    font-weight: bold;
    position: relative;
    text-align: center;
}
label:last-child::after {
    background:rgb(29, 172, 0);
    border: solid 1px rgb(29, 172, 0);
    padding: 6px 20px;
    border-radius: 25px;
    width: 30px;
    height: 30px;
    content: "";
    position: absolute;
    top: -7px;
    left: 0;
    z-index: -1;
  transform: scale(1) translateX(calc(50% - -3px));
}

label:last-child:hover::after{
  transform: scale(1.2) translateX(calc(50% - 7.5px));
  top: -9px;
  /* left: 0; */
  transition: all ease-in-out 70ms;
}

input {
  all: unset;
  width: 100%;
  height: 100%;
}
label {
  position: relative;
  height: 30px;
  width: 50%;
  margin-bottom: 30px;
  cursor: pointer;
}
label:not(:last-child)::after {
  content: "";
  position: absolute;
  margin-bottom: 30px;
  background: rgb(10, 10, 10);
  border:solid 1px white;
  border-radius: 15px;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
label:hover::after {
  border: solid 3px rgb(29, 172, 0);
  transform: scale(1.6, 1.2);
  top: -3px;
  border-radius: 25px;
  transition: all ease-in-out 70ms;
}
<form method="POST" class="formulario">
  <h1 class="login">LOGIN</h1>
  <label><input type="text" class="nome" placeholder="nome"></label>
  <label><input type="password" class="senha" placeholder="senha"></label>
  <label><input type="submit" value="enviar" class="enviar"></label>
</form>

1
  • 1
    muito obrigado, agora eu entendi a lógica do código <3
    – lucas F
    Commented 25/02/2019 às 15:05
2

Coloque cada elemento do formulário dentro de uma div flex com uma altura fixa. No exemplo abaixo coloquei 55px de height. Se quiser também pode criar uma classe para cada div para ajustar o espaçamento entre um elemento e outro:

*{
   color: white;
   position: relative;
   }

body{
    background: rgb(1, 1, 24);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    color: white;
}

.formulario{
    display: flex;
    background: black;
    border-radius: 200px;
    padding: 50px;
    height: 500px;
    width: 300px;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 0px 0px 1px rgb(29, 172, 0)
}

/* estilos das divs */
.formulario div{
   height: 55px;
   display: flex;
   position: relative;
   justify-content: center;
   align-items: center;
}


.login{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: bolder;
    font-size: 60px;
}

.nome{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.nome:hover, .nome:focus{
    border: solid 3px rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.nome::placeholder{
    font-family: cursive; 
    text-align: center;
}

.senha{
    margin-bottom: 30px;
    background: rgb(10, 10, 10);
    border:solid 1px white;
    border-radius: 15px;
}

.senha:hover, .senha:focus{
    border: solid 3px  rgb(29, 172, 0);
    padding: 7px 50px;
    transition: ease-in-out 70ms;
}

.senha::placeholder{
    font-family: cursive; 
    text-align: center;
}

.enviar{
    background:rgb(29, 172, 0);
    border-radius: 15px;
    border: solid 1px rgb(29, 172, 0);
    border-radius: 15px;
    color: white;
    padding: 6px 20px;
    border-radius: 200px;
    color: black;
    font-family: cursive;
    font-weight: bold
}

.enviar:hover{
    padding: 20px 36px;
    transition: ease-in-out 70ms;
}
<form method="POST" class="formulario">
   <h1 class="login">LOGIN</h1>
   <div>
      <input type="text" class="nome" placeholder="nome">
   </div>
   <div>
      <input type="password" class="senha" placeholder="senha">
   </div>
   <div>
      <input type="submit" value="enviar" class="enviar">
   </div>
</form>

1
  • valeu maninho, seu código foi o que mais me ajudou <3
    – lucas F
    Commented 25/02/2019 às 15:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .