CSS Form input Field text and gradient Border

Preview

HTML Code:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Input Text Animation</title>
</head>
<body>
    <div class="inputBox">
        <input type="text" required="required">
        <span>First Name</span>
        <i></i>
    </div>

    <div class="inputBox">
        <input type="text" required="required">
        <span>Last Name</span>
        <i></i>
    </div>

</body>
</html>

CSS Code:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wdht@300;400;500;600;700;800;900&display=swap');
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body
{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    gap: 30px;
    background: #222;
}

.inputBox
{
    position: relative;
    width: 250px;
}
.inputBox input
{
    width: 100%;
    background: transparent;
    color: #fff;
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 1em;
    letter-spacing: 0.1em;
    padding: 10px 0 5px;
}
.inputBox span
{
    position: absolute;
    left: 0;
    padding: 10px 0 5px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    pointer-events: none;
    letter-spacing: 0.1em;
    transition: 0.5s;
}

.inputBox input:valid ~ span,
.inputBox input:focus ~ span
{
    color: #2196f3;
    transform: translateY(-16px);
    font-size: 0.65em;
}
.inputBox i
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
    overflow: hidden;
}
.inputBox i::before
{
    content: '';
    position: absolute;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,#ff1b69,#ff0,#2196f3,#9c27b0,#ff1b69);
    animation: animate 2s linear infinite;
    transition: 0.5s;
}


.inputBox input:valid ~ i::before,
.inputBox input:focus ~ i::before
{
    left: 0;
}
@keyframes animate
{
    0%
    {
        background-position-x: 0;
    }
    100%
    {
        background-position-x: 250px;
    }
}

That’s all! I hope, you have successfully created CSS Form input Field text and gradient Border. If you have any questions or suggestions, let me know by comment below. Happy coding 😊

INTERESTING Code

CSS Form input Field text and gradient Border

CSS Form input Field text and gradient Border

Preview

Post a Comment

0 Comments

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget

INTERESTING Code

CSS Form input Field text and gradient Border

CSS Form input Field text and gradient Border

Preview

Post a Comment

0 Comments

Social Media

Popular Posts

Tags

Labels

INTERESTING Code

Contact Form

Menu Footer Widget