Responsive Login Form with Animated Placeholder Text Using HTML, CSS & Javascript

In this video you will learn to create a responsive login form with animated placeholder text using html, css and javascript.

To animate the placeholder text inside this repsonive login form we are going to use javascript and utilize the focus-within pseudo class selector.

We are going to use label as the placeholder text for the input elements and then we will associate the relevant label with its revelant input element. We are going to further animate these labels so that they work as the placeholder text for the input elements which can further be animated.

You will also learn how you can create a button with animated gradient brackground using css only. You will see the power of viewport units like vmin, vw and vh to make this form responsive.

The main purpose of this video to teach you about creating a responsive form design without using the media queries and leveraging the power of the css variables. Also, you will see how we can move the floating input placeholder text using only CSS and some javascript.

01:12 - Structure for Responsive Login Form with Animated Placeholder Text
03:01 - Creating Gradient Background using CSS for the page
04:02 - Centering the Form Vertically and Horizontally using CSS Flexbox
04:42 - Styling the form and its contents
06:55 - Styling the form input elements using CSS
08:15 - Centering the label placeholder text vertically inside input element
10:05 - Creating Custom Border to bottom of the input field with a Gradient Background
13:08 - Animating the gradient border on the input elements
15:56 - Styling html links and buttons
17:04 - Apply gradient background on the button
18:54 - Animate Gradient button background on hover
20:55 - Creating CSS Circular shapes for the form container background
24:11 - Floating animated placeholder text on focus state using javascript
28:32 - Adding Classes to HTML form container element using javascript dynamically for the focused and filled state
31:04 - Adding a custom border to the input element when input has been filled or it isn’t empty.

Source Code:

Subscribe :

#html #css #javascript

What is GEEK

Buddha Community

Responsive Login Form with Animated Placeholder Text Using HTML, CSS & Javascript
Nandini roy

Nandini roy


Responsive Personal Portfolio Website Using HTML CSS and JavaScript


#create a portfolio website with html css javascript #personal portfolio complete website using only html css javascript #responsive portfolio website html css javascript #responsive personal portfolio website #portfolio website #responsive website

anita maity

anita maity


Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo

#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen

wp codevo

wp codevo


Responsive Personal Portfolio Website using HTML CSS & JavaScript

#responsive website using html5 and css3 #responsive website html css #portfolio website #portfolio website design in html css #complete responsive website in html css javascript #one page personal website

wp codevo

wp codevo


Responsive Login & Registration Form Using HTML & CSS & JS

#registration form #login form #sign in form #responsive login #html login page

wp codevo

wp codevo



#responsive website using html5 and css3 #portfolio website #one page personal website html css #portfolio website design in html css #css responsive website design #responsive website html css