Create Sports Login Form using HTML & CSS

By Faraz - July 30, 2025

Learn how to create a stylish sports login form using HTML and CSS. Step-by-step guide for beginners to build a responsive and modern login form.

Join us on Telegram

Read Also Creating a Responsive Pet Store Landing Page using HTML & CSS.jpg

Creating a Responsive Pet Store Landing Page using HTML and CSS (Source Code)

Creating a good-looking and user-friendly login form is important for any sports-related website or app. Whether it's a gym, sports club, or fantasy sports platform, the login form is often the first impression for users. In this blog, you’ll learn how to create a sports login form using HTML and CSS, step-by-step.

We’ll use basic HTML for layout and CSS for styling, making it simple for beginners to follow and create a professional-looking login interface.

Prerequisites

Before we begin, ensure you have the following:

Basic understanding of HTML and CSS
A text editor like VS Code, Sublime, or Notepad++
Any web browser (Chrome, Firefox, etc.)

Source Code

Step 1 (HTML Code):

To get started, we first need to create a basic HTML file. In this file, we will include the main structure for our login form. Let's break down the HTML code step by step:

`<!DOCTYPE html>`

Declares the document type. It tells the browser to render the page in HTML5 mode.

`<html lang="en">`

This is the root element of the HTML document.
lang="en" specifies the language as English (important for SEO and accessibility).

`<head>` Section

This part contains metadata and links required for the page.

<meta charset="UTF-8">

Defines the character encoding as UTF-8. Supports most characters/symbols.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Makes the layout responsive on mobile by scaling it to the device width.

<title>SportFit - Login Form</title>

Sets the browser tab title.

<link rel="stylesheet" href="styles.css">

Links an external CSS file for styling.

`<body>` Section

This is the visible part of the webpage.

<div class="login-container">

A wrapper div to hold the entire login form content. Can be styled with CSS for layout and background.

Logo Section

<div class="logo">
    <img src="..." alt="SportFit Logo">
    <h1>SPORTFIT PRO</h1>
    <p>Track. Train. Transform.</p>
</div>

Displays the logo image and branding text.
The <img> tag loads the brand logo.
<h1> is the main heading.
<p> is a short brand tagline.

Login Form Section

<form>

Begins the HTML form.

Username Field:

<div class="input-group">
    <input type="text" id="username" required>
    <label for="username">Username or Email</label>
</div>

A text input for the username or email.
required ensures the user must fill it in before submitting.

Password Field:

<div class="input-group">
    <input type="password" id="password" required>
    <label for="password">Password</label>
</div>

A password input with hidden characters.

Remember Me & Forgot Password Section

<div class="remember-forgot">
    <div class="remember-me">
        <input type="checkbox" id="remember">
        <label for="remember">Remember me</label>
    </div>
    <div class="forgot-password">
        <a href="#">Forgot password?</a>
    </div>
</div>

Allows users to stay logged in by checking the box.
A forgot password link is provided for password recovery.

Login Button

<button type="submit" class="login-btn">Login</button>

A styled button to submit the login form.

Divider

<div class="divider">or continue with</div>

Visually separates the login form from the social login section.

Social Login Options

<div class="social-login">
    <div class="social-btn"><img src="..." alt="Google"></div>
    <div class="social-btn"><img src="..." alt="Facebook"></div>
    <div class="social-btn"><img src="..." alt="Instagram"></div>
</div>

Adds login options with Google, Facebook, and Instagram.
Uses clickable icon buttons (actual login functionality would be added with JS later).

Signup Link

<div class="signup-link">
    Don't have an account? <a href="#">Sign up</a>
</div>

Provides a link for new users to register.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SportFit - Login Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="login-container">
        <div class="logo">
            <img src="https://cdn-icons-png.flaticon.com/512/3898/3898082.png" alt="SportFit Logo">
            <h1>SPORTFIT PRO</h1>
            <p>Track. Train. Transform.</p>
        </div>
        
        <form>
            <div class="input-group">
                <input type="text" id="username" required>
                <label for="username">Username or Email</label>
            </div>
            
            <div class="input-group">
                <input type="password" id="password" required>
                <label for="password">Password</label>
            </div>
            
            <div class="remember-forgot">
                <div class="remember-me">
                    <input type="checkbox" id="remember">
                    <label for="remember">Remember me</label>
                </div>
                <div class="forgot-password">
                    <a href="#">Forgot password?</a>
                </div>
            </div>
            
            <button type="submit" class="login-btn">Login</button>
            
            <div class="divider">or continue with</div>
            
            <div class="social-login">
                <div class="social-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/2991/2991148.png" alt="Google">
                </div>
                <div class="social-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" alt="Facebook">
                </div>
                <div class="social-btn">
                    <img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" alt="Instagram">
                </div>
            </div>
            
            <div class="signup-link">
                Don't have an account? <a href="#">Sign up</a>
            </div>
        </form>
    </div>
</body>
</html>

Read Also

Create Razorpay Payment Button using HTML and CSS

Step 2 (CSS Code):

Once the basic HTML structure of the login form is in place, the next step is to add styling to the form using CSS. Let's break down the CSS code step by step:

1. Font and Global Reset

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

Imports the Poppins font from Google Fonts.
Common for modern and clean UI.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

Removes default spacing from all elements.
Uses box-sizing: border-box so padding/borders don’t affect element size.
Applies Poppins font to all text.

2. Body Styling with Background Animation

body {
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Sets a colorful, animated gradient background.
background-size: 400% 400% creates a smooth color-flow animation.
display: flex centers the login box vertically and horizontally.
height: 100vh makes the body full screen height.

Gradient Animation:

@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

Animates the background colors left to right in a loop.

3. Login Container Box

.login-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 0.5rem 1.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.5s ease;
}

A frosted-glass style card with a white semi-transparent background.
backdrop-filter: blur(10px) adds blur behind the card.
Rounded corners and soft shadow for a premium look.
Transitions and 3D perspective allow for future animations.

4. Logo Area

.logo {
  text-align: center;
  margin-bottom: 10px;
}
.logo img {
  width: 80px; height: 80px;
}
.logo h1 { ... }
.logo p { ... }

Styles the brand logo, name, and slogan.
Clean layout with spacing and centered text.

5. Input Fields

.input-group {
  margin-bottom: 25px;
  position: relative;
}
.input-group input {
  width: 100%;
  padding: 15px 20px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  box-shadow: subtle;
}
.input-group input:focus + label,
.input-group input:valid + label {
  top: -10px;
  font-size: 12px;
  background: white;
  padding: 0 5px;
  color: #ff6b6b;
}

Rounded and soft-styled inputs
Labels float up when input is focused or filled (nice UX).
+ label uses CSS sibling selector to animate the label when the input is active.

6. Remember Me + Forgot Password

.remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.remember-me input {
  accent-color: #ff6b6b;
}
.forgot-password a:hover {
  color: #ff6b6b;
}

Aligns "Remember Me" checkbox and "Forgot Password?" side-by-side.
Adds hover color to the link and a pink accent color to the checkbox.

7. Login Button

.login-btn {
  width: 100%;
  padding: 10px;
  border-radius: 50px;
  background: linear-gradient(to right, #ff6b6b, #ff8e53);
  color: white;
  font-weight: 600;
  box-shadow: subtle;
  transition: all 0.3s ease;
}
.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: deeper;
}

Gradient pink-orange button with uppercase text.
Adds hover animation (lift effect).

8. Divider ("or continue with")

.divider {
  margin: 20px 0;
  text-align: center;
  position: relative;
  color: #999;
}
.divider::before,
.divider::after {
  content: '';
  width: 30%;
  height: 1px;
  background-color: #ddd;
}

Horizontal line with "or continue with" text in the center.
Decorative and improves the flow to social login options.

9. Social Login Icons

.social-login {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-btn {
  width: 45px; height: 45px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: soft;
  transition: lift on hover;
}

Circular buttons for Google, Facebook, Instagram.
Hover effect lifts the buttons slightly.

10. Signup Link

.signup-link {
  text-align: center;
  font-size: 14px;
}
.signup-link a {
  color: #ff6b6b;
  font-weight: 600;
}
.signup-link a:hover {
  color: #ff8e53;
}

A call to action for users to register.
Uses branded pink-orange colors and subtle hover effects.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.login-container {
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  width: 400px;
  padding: 0.5rem 1.5rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: all 0.5s ease;
}

.logo {
  text-align: center;
  margin-bottom: 10px;
}

.logo img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.logo h1 {
  color: #333;
  font-weight: 700;
  margin-top: 10px;
  font-size: 28px;
  letter-spacing: 1px;
}

.logo p {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.input-group {
  margin-bottom: 25px;
  position: relative;
}

.input-group input {
  width: 100%;
  padding: 15px 20px;
  border: none;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50px;
  font-size: 14px;
  color: #333;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.input-group input:focus {
  outline: none;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.input-group label {
  position: absolute;
  top: 15px;
  left: 20px;
  color: #999;
  font-size: 14px;
  pointer-events: none;
  transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:valid + label {
  top: -10px;
  left: 15px;
  font-size: 12px;
  background-color: #fff;
  padding: 0 5px;
  color: #ff6b6b;
}

.remember-forgot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  font-size: 13px;
}

.remember-me {
  display: flex;
  align-items: center;
}

.remember-me input {
  margin-right: 5px;
  accent-color: #ff6b6b;
}

.forgot-password a {
  color: #666;
  text-decoration: none;
  transition: color 0.3s ease;
}

.forgot-password a:hover {
  color: #ff6b6b;
}

.login-btn {
  width: 100%;
  padding: 10px;
  border: none;
  background: linear-gradient(to right, #ff6b6b, #ff8e53);
  color: white;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.login-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(255, 107, 107, 0.6);
}

.divider {
  margin: 20px 0;
  text-align: center;
  position: relative;
  color: #999;
  font-size: 13px;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background-color: #ddd;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.social-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.social-btn img {
  width: 20px;
  height: 20px;
}

.signup-link {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}

.signup-link a {
  color: #ff6b6b;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
}

.signup-link a:hover {
  color: #ff8e53;
}

Final Output:

Read Also

How to Create Glassmorphism Loading Animation with HTML and CSS Only

Conclusion:

Building a sports login form using HTML and CSS is simple and fun. It helps improve your frontend skills and gives you something visually appealing to use in a real sports website or application.

You can always customize this form by:

Changing the background image to match your sport
Using different colors or fonts
Adding animations or mobile responsiveness

Keep experimenting and adding more features as you learn!

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: how to create a sports login form using html and css, sports themed login page with html and css, simple sports login ui design using html css, step by step html css login form tutorial, beginner html css sports login form design, sports login form, html login form, css login form, login page design, html css form

End of the article

Latest Components

Free HTML News Website Landing Page Code Snippet: Modern & Responsive

by Faraz - April 21, 2026

Download a free, high-performance HTML news website landing page template. Built with Tailwind CSS and JavaScript, this "Newstant" template is optimized for corporate news and business intelligence portals.