Marca de entrada

1430 cleanapp42

Abrir no Editor Publique Seu Código

Recomendado

23 September 2025

Trecho de animação de carregamento em queda CSS

19 March 2025

Um código de Mete

HTML

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    padding: 0;
    margin: 0;
    font-family: "poppins", sans-serif;
    box-sizing: border-box;
    font-weight: 500;
}

body {
    min-height: 100svh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-container {
    position: relative;
    max-width: 350px;
    width: 100%;
    height: 45px;
}

input {
    width: 100%;
    height: 100%;
    outline: none;
    border-radius: .3rem;
    border: 1.5pt solid #ccc;
    padding-left: 16px;
    font-size: 17px;
}

label {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    transition: all 0.2s ease-in-out;
    color: #aaa;
    pointer-events: none;
}

input:focus+label,
input:valid+label {
    left: 14px;
    font-size: 15px;
    top: 0;
    color: #111;
    line-height: 1;
    background-color: #fff;
    padding-inline: 5px;
    font-weight: 600;
}

input:focus,
input:valid {
    border-color: #111;
}

Marca de entrada

Recomendado

Trecho de animação de carregamento em queda CSS

Botão de confete

Um código de Mete

HTML

CSS

JS

Recomendado

Trecho de animação de carregamento em queda CSS

Botão de confete

Um código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS