CSS Form #5 - Code Example

Demo

2.11 KB
HTML, CSS
Form
sign in
MIT License

Code
Editor

HTML

<div class="login">
    <div class="form">
        <p>welcome</p>
        <form class="login-form">
            <input type="text" placeholder="email" required />
            <input type="password" placeholder="password" required />
            <button>login</button>
        </form>
    </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Comfortaa&display=swap");

body {
    background: #e0e0e0;
}

.login {
    width: 360px;

    font-family: "Comfortaa", cursive;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}

.form {
    position: relative;
    z-index: 1;
    background: #ffffff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    max-width: 600px;
    padding: 45px;
    text-align: center;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    background: #e0e0e0;
    -webkit-box-shadow: -11px 11px 22px #bebebe, 11px -11px 22px #ffffff;
    -moz-box-shadow: -11px 11px 22px #bebebe, 11px -11px 22px #ffffff;
    box-shadow: -11px 11px 22px #bebebe, 11px -11px 22px #ffffff;
}

.form input {
    outline: 0;
    background: #e0e0e0;
    width: 100%;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0 0 15px;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 14px;
    font-family: "Comfortaa", cursive;
}

.form input:focus {
    background: #e0e0e0;
}

.form button {
    font-family: "Comfortaa", cursive;
    text-transform: uppercase;
    outline: 0;
    background: #e0e0e0;
    width: 100%;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 15px;
    color: #ffffff;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    -o-transition: all 0.3 ease;
    -moz-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

.form button:active {
    background: #395591;
}

HTML
CSS

The code snippet we’re looking at crafts a sleek and user-friendly sign-in form using HTML, CSS, and a hint of JavaScript (although it’s mentioned that no JS is actually used in this example). At its core, HTML structures the form, creating a welcoming interface where users can input their email and password. These fields are essential for security and accessibility, ensuring that users can securely access their accounts.

CSS takes this functionality and dresses it up, employing a modern design aesthetic that’s both appealing and practical. The use of soft background colors, rounded borders, and subtle shadows gives the form a friendly yet professional look. The styling is further refined with custom fonts from Google Fonts, enhancing readability and user experience. Inputs and buttons are designed to be visually inviting, encouraging interaction through changes in color and style upon user actions, like focusing on an input field or clicking the button.