Neomorphic Neon Form - Dark Mode

index.html

<div class="box">
      <div class="box-title">
        <h1>Neon Form</h1>
        <p>Hover me</p>
      </div>
      <div class="form-box">
        <input
          type="text"
          class="email"
          placeholder="Please enter your e-mail"
        />
        <input type="password" class="pass" placeholder="Password" />
      </div>
      <div class="form-button">
        <button type="button">Log in</button>
      </div>
    </div>

neomorphic-neon-form-dark-mode.markdown

Neomorphic Neon Form - Dark Mode

A Pen by Gustavo Magnago on CodePen.

License.

style.css

* {
  font-family: "Roboto Mono", monospace;
  border: none;
  outline: none;
}
p {
  font-size: 15px;
  margin: -15px;
}
body {
  background-color: #333;
  font-family: "Quicksand", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  color: #babecc;
  margin: 5%;
  width: 380px;
  padding: 35px;
  border-radius: 2em;
  box-shadow: 5px 5px 20px #575259, -5px -5px 20px #111011;
  background-color: #333;
}
.box:hover {
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 5px #99b9ff,
    0 0 10px #99b9ff, 0 0 20px #99b9ff, 0 0 30px #99b9ff, 0 0 50px #99b9ff;
  box-shadow: -5px -5px 20px #111011, 5px 5px 10px #b2caff, 6px 6px 30px #99b9ff,
    -5px -5px 25px #111011;
}
.box-title {
  text-align: center;
  font-size: 25px;
  letter-spacing: 2px;
}

.form-box {
  padding: 20px 5px 5px 5px;
}

input {
  color: #babecc;
  font-size: 20px;
  padding: 20px;
  width: 90%;
}
input::placeholder {
  color: #babecc;
}

input:hover::placeholder {
  color: #fff;
}
input:hover {
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #99b9ff, 0 0 5px #99b9ff,
    0 0 5px #99b9ff;
}

.email,
.pass {
  background-color: rgb(255, 255, 255, 0.05);
  margin: 30px 0;
  border-radius: 25px;
  box-shadow: inset 2px 2px 5px #111011, inset -5px -5px 10px #575259;
}

button {
  background-color: #333;
  font-size: 20px;
  color: #babecc;
  width: 100%;
  margin: 30px 0;
  padding: 20px;
  border-radius: 25px;
  box-shadow: 5px 5px 20px #575259, -5px -5px 20px #111011;
  text-align: center;
}

button:hover {
  color: #fff;
  text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 2px #fff, 0 0 5px #99b9ff,
    0 0 10px #99b9ff, 0 0 20px #99b9ff, 0 0 30px #99b9ff, 0 0 50px #99b9ff;
  box-shadow: -5px -5px 25px #111011, 3px 3px 10px #b2caff, 4px 4px 20px #99b9ff,
    -5px -5px 25px #111011;
}

button:active {
  color: #7fa8ff;
  text-shadow: 0 0 2px #99b9ff, 0 0 2px #99b9ff, 0 0 2px #99b9ff,
    0 0 5px #99b9ff, 0 0 10px #99b9ff, 0 0 20px #99b9ff, 0 0 30px #99b9ff,
    0 0 50px #99b9ff;
  box-shadow: inset 2px 2px 5px #111011, inset -5px -5px 10px #575259;
}