Author -  Sai gowtham

How to create a Instagram login Page

css6min read

This is my first project in the #15daysofcss challenge where I created an Instagram login page.

Time spent

I spent 3hours of my time to complete this project.

Most of the time i spent on transition part to get the smooth transition.

Codepen demo

Here is the codepen demo of the Instagram login page.

Now, let’s get into the coding part.

The Html

First, we start with an HTML markup.

<div class="container">
    <div class="box">
        <div class="heading"></div>
        <form class="login-form">
            <div class="field">
                <input id="username" type="name" placeholder="Phone number, username, or email" />
                <label for="username">Phone number, username, or email</label>
            </div>
            <div class="field">
                <input id="password" type="password" placeholder="password" />
                <label for="password">Password</label>
            </div>
            <button class="login-button" title="login">Log In</button>
            <div class="separator">
                <div class="line"></div>
                <p>OR</p>
                <div class="line"></div>
            </div>
            <div class="other">
                <button class="fb-login-btn" type="button">
                    <i class="fa fa-facebook-official fb-icon"></i>
                    <span class="">Log in with Facebook</span>
                </button>
                <a class="forgot-password" href="#">Forgot password?</a>
            </div>
        </form>
    </div>
    <div class="box">
        <p>Don't have an account? <a class="signup" href="#">Sign Up</a></p>
    </div>
</div>

In the above code, we have a .container div with two .box divs

  • The first .box contains a

    • heading

    • Two form input fields (username, password).

    • Login button

    • OR separator (⎯⎯⎯⎯ OR ⎯⎯⎯⎯)

    • Other section (Log in with Facebook, forgot password)

  • The second .box contains a <p> element with Sign up link.

The CSS

Now, we need to style our html elements by using css.

body {
  font-family: sans-serif;
  background-color: #fafafa;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
  font-size: 14px;
}

.box {
  max-width: 350px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #ffff;
  border: 1px solid #e6e6e6;
  border-radius: 1px;
  margin: 0 0 10px;
  padding: 10px 0;
  flex-grow: 1;
}

.heading {
  margin: 22px auto 12px;
  background-image: url("https://www.instagram.com/static/bundles/es6/sprite_core_b20f2a3cd7e4.png/b20f2a3cd7e4.png");
  background-position: -98px 0;
  height: 51px;
  width: 177px;
  overflow: hidden;
}

.field {
  margin: 10px 0;
  position: relative;
  font-size: 14px;
  width: 100%;
  text-overflow: ellipsis;
}

input {
  padding: 9px 0px 7px 9px;
  font-size: 12px;
  width: 16rem;
  height: 1.2rem;
  outline: none;
  background: #fafafa;
  border-radius: 3px;
  border: 1px solid #efefef;
}

/* label intial position*/

label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  padding-bottom: 15px;
  transform: translateY(10px);
  line-height: 6px;
  transition: all ease-out 0.1s;
  font-size: 14px;
  color: #999;
  padding-top: 6px;
}

/* hiding placeholder in all browsers */

input::placeholder {
  visibility: hidden;
}

/* hiding  placeholder in mozilla */
.login-form ::-moz-placeholder {
  color: transparent;
}

/* label final position */
input:not(:placeholder-shown) + label {
  transform: translateY(0);
  font-size: 11px;
}

/* input padding increases if placeholder is not shown */
input:not(:placeholder-shown) {
  padding-top: 14px;
  padding-bottom: 2px;
}

.login-button {
  text-align: center;
  width: 100%;
  padding: 0.5rem;
  border: 1px solid transparent;
  background-color: #3897f0;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 6px;
}

.separator .line {
  height: 1px;
  width: 40%;
  background-color: #dbdbdb;
}

.other {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.fb-login-btn {
  margin: 1rem;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  color: #385185;
  font-weight: 600;
  background: transparent;
}

.fb-icon {
  color: #385185;
  font-size: 1rem;
  padding-right: 1px;
}

.forgot-password {
  font-size: 11px;
  color: #003569;
}

.signup {
  color: #3897f0;
  font-weight: 600;
}

The Wow part

If you are still not tested the codepen demo then click on the above run pen button and start typing in the input field you will see the label is sliding up with a smooth transition.

To do that first we need to detect the user typing for that we need to use :placeholder-shown pseudo css class instead of using JavaScript onkeyup event.

Here is the code

  1. First, we need to hide the placeholder text by setting a visibility property to hidden.
/* hiding placeholder text in all browsers */

input::placeholder {
  visibility: hidden;
}

In Mozilla, i come with a trick by setting the color to transparent


/* hiding  placeholder text in mozilla */
.login-form ::-moz-placeholder {
  color: transparent;
}
  1. Now, We need to move the label text inside the input text box.
/* label final position */
label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  padding-bottom: 15px;
  transform: translateY(10px);
  line-height: 6px;
  transition: all ease-out 0.1s;
  font-size: 14px;
  color: #999;
  padding-top: 6px;
}
  1. When the user starts typing we need to detect and slide up the label by applying transition for smooth transformation.
input:not(:placeholder-shown) + label {
  transform: translateY(0);
  font-size: 11px;
}

The above code does is if the place-holder text is not shown move the label to 0px in the Y-axis and decrease the font-size to 11px.

Where plus + is used to the select the next element, in our html markup the next element to the input field is <label>.

OR Separator part

To create the OR separator like this.

⎯⎯⎯⎯  OR ⎯⎯⎯⎯
  1. We need to use a div .separator with 2 div tags and a p tag.
<div class="separator">
  <div class="line"></div>
  <p>OR</p>
  <div class="line"></div>
</div>
  1. To create the horizontal line on the left and right-hand side of the OR text we need to use

height: 1px and width: 40%.

Basically we have 100% width, we give each line to 40% so 2x40% = 80% remaining 20% is occupied by the OR text.

We used flex-box to align everything in the X-axis, creating a space between the OR text and line

.separator {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #999;
  margin-top: 6px;
}

.separator .line {
  height: 1px;
  width: 40%;
  background-color: #dbdbdb;
}

I hope you enjoyed ✓ and learned something new.

If you are interested in doing 15daysofcss challenge checkout 15daysofcss page.

Similar tutorials

How to hide the Scroll Bars using CSSBootstrap - change the color of a button on hoverHow to Change the font color in CSSRemoving CSS styles for a particular elementCSS- Center a anchor element horizontallyHow to Create a Codepen animated Button with CSS

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2023 (Beginner + Advanced)
JavaScript - The Complete Guide 2023 (Beginner + Advanced)
116,648 students enrolled
52 hours of video content
$14.99 FROM UDEMY
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
631,582 students enrolled
49 hours of video content
$24.99 FROM UDEMY
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
203,937 students enrolled
31.5 hours of video content
$14.99 FROM UDEMY