Subscribe To Newsletter Button With CSS

<div class="container">
   <div class="button">
      <div class="content">
         <input type="email" placeholder="Enter Your Email Id">
         <button>Submit</button>
      </div>
      <div class="upper">
	  <span>Subscribe for newsletter</span>
      </div>
   </div>
</div>

Discarding Default Paddings and Margins:

Let us style this button to make it eye-catching for the user. We begin by getting rid of unwanted margins and paddings that are added to the document’s body by default.

body{
     padding: 0;
     margin: 0;
}

Centering the Button and Setting Up the Perspective:

Next, We set up the dimensions for the ‘container’ div to take up the entire width and height of the viewport. Another thing we do here is set the background color to hex-code #f5f5f5 so it is lighter than the actual button. This makes the button look lowered from the surface. Colors and Shadows play an important role in defining the depth of the button. So be careful with your choices of shades and shadows. To center the button, we use the flex layout. We use the ‘Align-items’ attribute to center the button vertically while ‘justify-content’ aligns the attribute horizontally.

Also, we use a property called ‘perspective’ that plays a crucial role when we use 3D Transforms. Perspective defines the depth of transforms or how far the element is from the user. Here, we set it to 800 pixels. This shows that the distance between the user and the z=0 plane is 800 pixels. Smaller the value, the more intense is the effect. Since we have used a moderate value for perspective, the effect does not look too intense.

.container{
      height: 100vh;
      width: 100vw;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      justify-content: center;
      perspective: 800px;
      -webkit-perspective:800px;
}

Using Shadows To Define Some Depth:

For the div ‘button’ we have used a color slightly darker than the ‘container’. We set the dimensions of ‘button’ to 450 80 pixels to create a nice rectangular shape. The button should appear lowered from surface hence we used some shadows on the inside edges of the ‘button’ div. For this we inset box-shadow. The shadow has no h-offset and v-offset set to 0. We set the blur radius to 25 pixels. Higher the value of blur radius, the deeper the button appears. Set the blur radius for your button accordingly.

.button{
      background-color: #eaeaea;
      height: 80px;
      width: 450px;
      border:10px solid #eaeaea;
      box-shadow: inset 0 0 25px rgba(5,5,5,0.15);
      position: relative;
}

Setting up the transform origin:

Next, we style the ‘upper’ div. Here, we have used a pleasant shade of sky blue with hex-code #359eec as the background color. It has the same dimensions as the ‘button’ div. Similar to the ‘button’ div we use the inset shadow. In CSS we have an option to choose how we want our transforms to be: Flat or 3D. Here, we need our transforms to be 3D therefore we use the ‘transform-style’ property. We set its value to ‘preserve-3d’.

The cover opens and closes from the top, so the place where the transforms originated should be at the bottom. Hence, we assign ‘bottom’ to the ‘transform-origin’ property. We use the flex layout to center the span inside the ‘upper’ div. Next, we set the font-size to 30 pixels. The span element inherits this value from its parent that is from the ‘upper’ div.

.upper{
      background-color:#359eec;
      height:80px;
      width: 450px;
      box-shadow: inset 0 0 25px rgba(5,5,5,0.15); 
      transform-style: preserve-3d;
      -webkit-transform-style:preserve-3d;
      transform-origin: bottom;
      position: relative;
      font-size: 30px;
      color:white;
      display: flex;
      justify-content: center;
      align-items: center;
}

Creating the On hover effect:

The ‘upper’ div flips open every time the mouse hovers over the ‘button’. For that, we use pseudo-class ‘:hover’ with the button. The ‘upper’ div rotate by -120 degrees on the y-axis on mouse hover. We are almost done with styling.

.button:hover .upper{
      transform:rotateX(-120deg);
}

Styling the Input field and Submit Button:

Moving on to content, style the email input, by setting the background to white. Also, set the width of this input field to 270 pixels and height to 17 pixels. Here, We have used the Montserrat font-family. To style the submit button, we have used the same color as that of the ‘upper’ div.

input[type="email"]{
      width:270px; 
      height: 17px;
      background-color: white;
      border:1.8px solid #359eec;
      padding: 5px;
      padding-left:10px;
      font-size:20px; 
      font-family: 'Montserrat', sans-serif;
}
button{
      background-color:#359eec;
      border:none;
      color:white;
      font-size: 19px;
      padding: 4px;
      padding-left: 25px;
      padding-right: 25px;
      font-family: 'Montserrat', sans-serif;
}

Adding the Final Touch:

We position the ‘content’ div relatively. 25 pixels from the top and left. When the ‘upper’ div flips open, the text on it should be hidden. Hence, we set the ‘back face-visibility’ property. The value of this property is set to a value of ‘hidden’. The text remains hidden on the backside of the span. We now have the ‘Subscribe for Newsletter’ Button ready.

.content{
      position: absolute;
      top:25px;
      left:25px;
}
span{
      backface-visibility: hidden;
      font-family: 'Montserrat', sans-serif;
      font-weight: bold;
}