Transparent Animated Login Form Using HTML and CSS

Animated Login Form

Transparent Animated Login Form is one of the best user experiences in today’s digital age. A well-designed login form not only enhances the aesthetics of your website but also improves usability. In this tutorial, I’ll walk through the creation of a transparent animated login form using HTML and CSS. By the end, you’ll have a sleek and modern login form that will elevate the user experience on your website.

Why Transparent Animated Login Forms Matter

Transparent animated login forms offer more than just visual appeal; they enhance user experience and engagement. Here’s why they matter:

  1. Aesthetics: Transparent forms provide a modern and sleek appearance, aligning with contemporary design trends. They offer a visually pleasing way to integrate login functionality seamlessly into website layouts.
  2. User Engagement: Animated elements catch the user’s attention and encourage interaction. By incorporating subtle animations, such as hover effects or transition animations, transparent login forms can make the login process more engaging and intuitive.
  3. Usability: Transparent forms can improve usability by maintaining context within the website’s design. Users can still see the underlying content while accessing the login form, reducing the feeling of disorientation and making navigation easier.
  4. Brand Image: A well-designed transparent login form reflects positively on the brand’s image. It communicates professionalism, attention to detail, and a commitment to providing a modern and user-friendly experience.
  5. Differentiation: In a competitive online landscape, unique design elements can set a website apart. Transparent animated login forms offer an opportunity for differentiation, helping websites stand out and leave a lasting impression on visitors.

Check Out Those Useful Articles

Transparent Animated Login Form Using HTML and CSS (Source Code)

To implement this Animated Login Form on your website, adhere to these straightforward steps:

  1. Start by establishing a directory for your project. You have the liberty to name this folder as per your preference. Within this folder, we’ll generate the requisite files.

  2. Generate a new file titled index.html. It’s essential that the file be named “index” with the extension “.html”.

  3. Subsequently, craft another file named style.css. Once more, confirm that the file name is “style” with the extension “.css”.

First, Copy the bellow HTML code and paste the codes into your index.html file.

				
					<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transparent Login Form By AbdulDev</title>
    <!-- CUstom CSS Link -->
    <link rel="stylesheet" href="style.css">
    <!-- Icon Link -->
    <link data-minify="1" href='https://abduldev.com/wp-content/cache/min/1/boxicons@2.1.4/css/boxicons.min.css?ver=1713614966' rel='stylesheet'>
<style id="wpr-lazyload-bg"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">:root{--wpr-bg-c5b3d11b-f77d-4de6-ad89-3b7419cf806a: url('https://abduldev.com/wp-content/uploads/2023/05/banner-bg-1.jpg');}:root{--wpr-bg-5d99ff69-e065-429d-a7b8-57d324106746: url('https://abduldev.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".elementor-2959 .elementor-element.elementor-element-b276408:not(.elementor-motion-effects-element-type-background), .elementor-2959 .elementor-element.elementor-element-b276408 > .elementor-motion-effects-container > .elementor-motion-effects-layer","style":":root{--wpr-bg-c5b3d11b-f77d-4de6-ad89-3b7419cf806a: url('https:\/\/abduldev.com\/wp-content\/uploads\/2023\/05\/banner-bg-1.jpg');}","hash":"c5b3d11b-f77d-4de6-ad89-3b7419cf806a"},{"selector":".rll-youtube-player .play","style":":root{--wpr-bg-5d99ff69-e065-429d-a7b8-57d324106746: url('https:\/\/abduldev.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"5d99ff69-e065-429d-a7b8-57d324106746"}]; const rocket_excluded_pairs = [];</script></head>
<body>
    <div class="container">
        <form action="#">
            <h1>Login</h1>
            <div class="input-box">
                <input type="text" placeholder="Username" required="required">
                <i class='bx bxs-user'></i>
            </div>
            <div class="input-box">
                <input type="password" placeholder="Password" required="required">
                <i class='bx bxs-lock-alt' ></i>
            </div>
            <div class="remember">
                <label><input type="checkbox">Rememver</label>
                <a href="#">Forget Password</a>
            </div>
            <button class="btn">Login</button>
            <div class="register">
                <p>Don't have an account? <a href="#">Register</a></p>
            </div>
        </form>
    </div>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
				
			

Second, Copy the bellow CSS code and paste the codes into your style.css file.

				
					*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}
body{
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(Image/bgimage.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: color;
    background-color: #00000080;
}
.container{
    width: 430px;
    background: transparent;
    color: #fff;
    padding: 40px 30px;
    border-radius: 10px;
    border: 2px solid #ffffff33;
    box-shadow: 0 0 10px #0000001a;
    backdrop-filter: blur(20px);
}
.container h1{
    font-size: 34px;
    text-align: center;
}
.input-box{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 30px 0;
}
.input-box input{
    width: 100%;
    height: 100%;
    background: transparent;
    border: 2px solid #ffffff33;
    outline: none;
    border-radius: 45px;
    font-size: 16px;
    color: #fff;
    padding: 20px 45px 20px 20px;
}
.input-box input::placeholder{
    color: #fff;
}
.input-box i{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
}
.remember{
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    margin: -15px 0 15px;
}
.remember label input{
    accent-color: #fff;
    margin-right: 5px;
}
.remember a{
    color: #fff;
    text-decoration: none;
}
.remember a:hover{
    color: #ededed;
}
.btn{
    width: 100%;
    height: 45px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    background: #fff;
    border: none;
    outline: none;
    border-radius: 45px;
    box-shadow: 0 0 10px #0000001a;
    cursor: pointer;
}
.register{
    font-size: 15px;
    text-align: center;
    margin-top: 20px;
}
.register a{
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
.register a:hover{
    color: #ededed;
}
				
			

Conclusion

Congratulations! You’ve successfully created a stylish transparent animated login form using HTML and CSS. By following this tutorial, you’ve not only enhanced the visual appeal of your website but also improved user experience. Experiment with different styles and animations to make the login form truly unique to your brand. Happy coding!

FAQs

A transparent animated login form is a user interface element on a website that allows users to log in to their accounts. It is characterized by its transparency, which allows the background content to be partially visible, and by animated effects such as transitions or hover effects.

Transparent animated login forms offer a modern and visually appealing way to integrate login functionality into a website. They enhance user experience, engagement, and brand image.

Share on Social Media

Related Articles

5 thoughts on “Transparent Animated Login Form Using HTML and CSS 2024”

  1. Usually I don’t learn article on blogs, however I wish to say that this write-up very pressured me to check out and do it! Your writing style has been surprised me. Thanks, very great post.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top