Simple form input effect

Developer
Anthony
Size
3,080 Kb
Views
14,168
  1. Simple form input effect Previews
  2. Simple form input effect HTML Codes
  3. Simple form input effect CSS Codes
  4. Simple form input effect JS Codes

How do I make an simple form input effect?

Simple animation test on input. What is a simple form input effect? How do you make a simple form input effect? This script and codes were developed by Anthony on 04 January 2023, Wednesday.

Simple form input effect Previews
IQ Test

Simple form input effect - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple form input effect</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form action="#" method="post"> <div class="input-row"> <input placeholder="Write your name" type="text" /> </div> <div class="input-row"> <input placeholder="Write your nickname" type="text" /> </div>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple form input effect - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Sintony:400,700);
*,
*:before,
*:after { box-sizing: border-box;
}
::-webkit-input-placeholder { color: white;
}
::-moz-placeholder { color: white;
}
:-ms-input-placeholder { color: white;
}
input:focus::-webkit-input-placeholder { color: #0796ad;
}
input:focus::-moz-placeholder { color: #0796ad;
}
input:focus:-ms-input-placeholder { color: #0796ad;
}
body { background: #6de5f9; font-family: 'Sintony', sans-serif; text-align: center;
}
form { margin: 0 auto; max-width: 600px;
}
.input-row:after { background: #09C0DE; content: ""; display: block; height: 5px; opacity: 0; transform: translateY(5px); transition: all .15s ease-in-out; width: 100%;
}
.input-row.current:after { opacity: 1; transform: translateY(0);
}
input[type=text] { background: transparent; border: 0; display: block; font-size: 18px; height: 50px; padding: 5px 20px 10px 20px; text-transform: uppercase; transition: all .15s ease-in-out; width: 100%;
}
input[type=text]:focus { background: rgba(255, 255, 255, 0.9); border-bottom: 0; box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1); color: #068094; outline: none; transform: translateY(5px);
}

Simple form input effect - Script Codes JS Codes

$('input:text').on('focusin', function() { $(this).parent().addClass('current');
}).on('focusout', function() { $(this).parent().removeClass('current');
});
Simple form input effect - Script Codes
Simple form input effect - Script Codes
Home Page Home
Developer Anthony
Username Tonours
Uploaded January 04, 2023
Rating 3
Size 3,080 Kb
Views 14,168
Do you need developer help for Simple form input effect?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Anthony (Tonours) Script Codes
Name
Remember MSN Wizz
Background Animation
Bender edit profile
Send button effect
Fail vibration
A Pen by Anthony
Button hover
Svg animation test
SVG fill animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!