Create Email Subscription Form Animation using only HTML & CSS

Hello readers, Today in this blog you'll learn how to create an Email Subscription Form Animation using only HTML & CSS. Earlier I have shared a blog on how to create an Animated Login Form Design and now I'm going to create a Subscription Button or Subscription Form Animation.

A subscription form is a form placed on any page of a website or blog where the users can input in the fields with their data to receive emails on topics associated with their interests. The main purpose of the subscription form is opting-in subscribers to your mailing list.

In this program (Email Subscription Form Animation), at first, on the webpage, there is a button with the labeled "Subscribe" and when you click on that button then the email field or form appears with elastic animation. This animation is fully based on pure CSS.

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: ;
}
::selection{
  color: #fff;
  background: #664AFF;
}
.wrapper{
  height: 60px;
  width: 400px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: relative;
}
.wrapper .btn-1{
  position: absolute;
  height: 100%;
  width: 50%;
  color: #664AFF;
  background: #fff;
  line-height: 60px;
  font-size: 27px;
  font-weight: 500;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
  transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
.wrapper .btn-1:active{
  transform: scale(0.9);
}
#click:checked ~ .btn-1{
  height: 40px;
  width: 100px;
  opacity: 0;
  pointer-events: none;
}
.wrapper .field{
  height: 100%;
  width: 0%;
  opacity: 0;
  pointer-events: none;
  position: relative;
  transition: 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .field{
  width: 100%;
  opacity: 1;
  pointer-events: auto;
}
.wrapper .field input{
  height: 100%;
  width: 100%;
  border: 2px solid #fff;
  border-radius: 5px;
  padding: 0 130px 0 15px;
  font-size: 20px;
  outline: none;
  box-shadow: 5px 5px 30px rgba(0,0,0,.2);
}
.wrapper .field input::placeholder{
  color: #999;
  font-size: 18px;
}
.wrapper .field .btn-2{
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  line-height: 40px;
  background: red;
  height: 40px;
  width: 100px;
  user-select: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.wrapper .field .btn-2:active{
  transform: translateY(-50%) scale(0.9);
}
.wrapper #click{
  display: none;
}

HTML Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
  <!DOCTYPE html>
<!-- Created By Mirulcoding - https://mirulcoding.blogspot.com/ -->
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
  <title>Animated Subscribe Button | Mirulcoding</title>
  </head>
<body>
    <div class="wrapper">
      <input type="checkbox" id="click">
      <label class="btn-1" for="click">Subscribe</label>
      <div class="field">
        <input type="text" placeholder="Email Address">
        <label for="click" class="btn-2">Subscribe</label>
      </div>
</div>
</body>
</html>

Create Email Subscription Form Animation using only HTML & CSS

Post a Comment

Post a Comment

Contact Form