Skip to content
No results
  • Home
  • Quizzes
    • HTML Quiz
    • CSS Quiz
    • JavaScript Quiz
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Interview Questions
  • Home
  • About us
  • Contact Us
  • Privacy Policy
  • Quizzes
Coding Torque

Learn by projects🚀

  • Home
  • Quizzes
    • HTML Quiz
    • CSS Quiz
    • JavaScript Quiz
  • HTML & CSS
    • Card Designs
    • Navbars
    • Login Forms
  • JavaScript
    • JavaScript Games
    • API Projects
  • Web Development
    • Frontend
    • Backend
  • Interview Questions
Coding Torque

Learn by projects🚀

Signup & Login Form with onClick switch effect using HTML and CSS

Signup & Login Form with onClick switch effect using HTML and CSS

  • Piyush PatilPiyush Patil
  • February 15, 2023
  • HTML & CSS, Intermediate, Login Forms, Web Development
Share your love
Welcome to Coding Torque! Are you looking for a way to create an eye-catching and interactive Signup & Login Form? Look no further! In this blog, we’ll be using HTML and CSS to create a stunning onClick switch effect. This is an awesome card that you won’t want to miss out on – so let’s get started!

Before we start, here are some cards you might like to create:

  • Filter Cards using JavaScript
  • Animated Product Card using JavaScript
  • Profile Cards Hover Effect using HTML & CSS

 

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code 

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Font Awesome CDN  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
        integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
        crossorigin="anonymous" />

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Signup/Login Form with Toggle button using HTML and CSS - Coding Torque</title>
</head>

<body>
   <!-- Further code here -->
</body>

</html>

Paste the below code in your <body> tag.

<div class="main">
    <input type="checkbox" id="chk" aria-hidden="true">

    <div class="signup">
        <form>
            <label for="chk" aria-hidden="true">Sign up</label>
            <input type="text" name="txt" placeholder="User name" required="">
            <input type="email" name="email" placeholder="Email" required="">
            <input type="password" name="pswd" placeholder="Password" required="">
            <button>Sign up</button>
        </form>
    </div>

    <div class="login">
        <form>
            <label for="chk" aria-hidden="true">Login</label>
            <input type="email" name="email" placeholder="Email" required="">
            <input type="password" name="pswd" placeholder="Password" required="">
            <button>Login</button>
        </form>
    </div>
</div>

Output Till Now

CSS Code 

Create a file style.css and paste the code below.

body {
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-family: "Jost", sans-serif;
  background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
}
.main {
  width: 350px;
  height: 500px;
  background: red;
  overflow: hidden;
  background: url("https://doc-08-2c-docs.googleusercontent.com/docs/securesc/68c90smiglihng9534mvqmq1946dmis5/fo0picsp1nhiucmc0l25s29respgpr4j/1631524275000/03522360960922298374/03522360960922298374/1Sx0jhdpEpnNIydS4rnN4kHSJtU1EyWka?e=view&authuser=0&nonce=gcrocepgbb17m&user=03522360960922298374&hash=tfhgbs86ka6divo3llbvp93mg4csvb38")
    no-repeat center/ cover;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
}
#chk {
  display: none;
}
.signup {
  position: relative;
  width: 100%;
  height: 100%;
}
label {
  color: #fff;
  font-size: 2.3em;
  justify-content: center;
  display: flex;
  margin: 60px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.5s ease-in-out;
}
input {
  width: 60%;
  height: 20px;
  background: #e0dede;
  justify-content: center;
  display: flex;
  margin: 20px auto;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 5px;
}
button {
  width: 60%;
  height: 40px;
  margin: 10px auto;
  justify-content: center;
  display: block;
  color: #fff;
  background: #573b8a;
  font-size: 1em;
  font-weight: bold;
  margin-top: 20px;
  outline: none;
  border: none;
  border-radius: 5px;
  transition: 0.2s ease-in;
  cursor: pointer;
}
button:hover {
  background: #6d44b8;
}
.login {
  height: 460px;
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(-180px);
  transition: 0.8s ease-in-out;
}
.login label {
  color: #573b8a;
  transform: scale(0.6);
}

#chk:checked ~ .login {
  transform: translateY(-500px);
}
#chk:checked ~ .login label {
  transform: scale(1);
}
#chk:checked ~ .signup label {
  transform: scale(0.6);
}

Output Till Now

Signup & Login Form with onClick switch effect using HTML and CSS
Written by: Piyush Patil
Credits: @mamislimen
If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖

Share your love
Speed Typing Test using javascript
Previous Post Speed Typing Test Game using HTML, CSS and JavaScript
Next Post Stunning Newsletter Subscription Form using HTML and CSS
newsletter subscription form using html and css
Recent Posts
  • Ying & Yang Cats with hover effect using HTML and CSS

    Ying & Yang Cats with hover effect using HTML and CSS

    12 months ago
  • Animated Button with Bird Effect using HTML and CSS

    Animated Button with Bird Effect using HTML and CSS

    12 months ago
  • Cubes with Hover Effects using HTML and CSS

    Cubes with Hover Effects using HTML and CSS

    12 months ago
  • X-Ray using HTML and CSS

    X-Ray using HTML and CSS

    12 months ago
  • Skillset icons with CSS Animation

    Skillset icons with CSS Animation

    12 months ago
Categories
Advance Algorithms API Projects App Development Backend Beginner Blockchain Development Bootstrap Card Designs Cheatsheets Coding CSS Games CSS Quiz Express JS Frontend Hero Section HTML & CSS HTML Quiz Intermediate Interview Questions JavaScript JavaScript Games JavaScript Quiz Login Forms MongoDB Navbars Next JS Node JS Products Programming Python Python Games Quizzes React React Quiz Reel Roadmaps SCSS TailwindCSS Toggle Buttons Uncategorized Web Design Web Development

Related Posts

Deploying a MERN App with Multiple Domain Names on VPS

  • Piyush Patil
  • February 13, 2025
  • HTML & CSS, API Projects, Backend, Express JS, Frontend, MongoDB, Next JS, React, Web Development

3D CSS Logo with Pure CSS

  • Piyush Patil
  • December 20, 2024
  • HTML & CSS

3D Santa using HTML and CSS Only

  • Piyush Patil
  • December 19, 2024
  • HTML & CSS
About Us

Coding Torque is a platform where we share amazing projects related Web development, App development, Software development, etc with Source Code.

Pages
  • About us
  • Contact Us
  • Privacy Policy
  • Quizzes
No results
Recent Posts
  • Crafting a Pure CSS 3D Breaking Bad Truck Scene

    Crafting a Pure CSS 3D Breaking Bad Truck Scene

    6 months ago
  • Creating a CSS 3D Chess Board with Pieces

    Creating a CSS 3D Chess Board with Pieces

    6 months ago

Copyright © 2025 - Coding Torque | Design by Piyush Patil