Webleb - Snippets de Código -

Abrir no Editor Publique Seu Código

Recomendado

29 November 2024

Um código por creativefunction305

HTML

CSS

/* Replace with your CSS Code 
(Leave empty if not needed) */                                           
<style>
*{
       padding: 0;
       margin: 0;
       box-sizing: border-box;
       font-family: "Poppins", sans-serif;
}

body{
       min-height: 100vh;
       display: flex;
       align-items: center;
       justify-content: center;
       background: #191825;
}

.input-field{
       position: relative;
}

.input-field input{
       width: 350px;
       height: 60px;
       border-radius: 6px;
       font-size: 18px;
       padding: 0 15px;
       border: 2px solid #fff;
       background: transparent;
       outline: none;
       color: #fff;
}

.input-field label{
       position: absolute;
       top: 50%;
       left: 15px;
       transform: translateY(-50%);
       color: #fff;
       font-size: 19px;
       pointer-events: none;
       transition: .3s;
}

input:focus{
       border: 2px solid #1cd679;
}

input:focus ~ label,
input:valid ~ label{
       top: 0;
       font-size: 16px;
       padding: 0 10px;
       background: #191825;
}
 </body>
</html>

Recomendado

Um código por efficientapp58

Um código por bachir123

Um código por creativefunction305

HTML

CSS

JS

Recomendado

Um código por efficientapp58

Um código por bachir123

Um código por creativefunction305

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS