Formulaire de connexion au Glassmorphisme

2138 Andev.web

Ouvrir dans l'éditeur Publiez votre code

Formulaire de connexion au Glassmorphisme

Recommandé

21 July 2024

Un code par youssefdahroug2005

6 June 2025

Un code du texte

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans", sans-serif;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  padding: 0 10px;
  background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
}

body::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("https://i.postimg.cc/0jv27Qvw/20008380-645221846.jpg"), #000;
  background-position: center;
  background-size: cover;
  z-index: -1;
}

.wrapper {
  width: 400px;
  border-radius: 15px;
  padding: 40px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
  transition: all 0.3s ease;
}

.wrapper:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

form {
  display: flex;
  flex-direction: column;
}

h2 {
  font-size: 2.2rem;
  margin-bottom: 25px;
  color: #ffffff;
  letter-spacing: 1px;
}

.input-field {
  position: relative;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  margin: 20px 0;
}

.input-field label {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #ffffff;
  font-size: 16px;
  pointer-events: none;
  transition: 0.3s ease;
}

.input-field input {
  width: 100%;
  height: 40px;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: #ffffff;
  padding: 0 10px;
}

.input-field input:focus~label,
.input-field input:valid~label {
  font-size: 0.9rem;
  top: 10px;
  transform: translateY(-150%);
  color: #ffdde1;
}

.forget {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 25px 0 35px 0;
  color: #ffffff;
}

#remember {
  accent-color: #ffdde1;
}

.forget label {
  display: flex;
  align-items: center;
}

.forget label p {
  margin-left: 8px;
}

.wrapper a {
  color: #ffdde1;
  text-decoration: none;
}

.wrapper a:hover {
  text-decoration: underline;
}

button {
  background-color: #271930;
 color: #ffffff;
  font-weight: 600;
  border: none;
  padding: 15px 20px;
  cursor: pointer;
  border-radius: 25px;
  font-size: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

button:hover {
  color: #000000;
  background: rgba(255, 255, 255, 0.2);
  border-color: #ffffff;
}

.register {
  text-align: center;
  margin-top: 30px;
  color: #ffffff;
}

Formulaire de connexion au Glassmorphisme

Recommandé

Formulaire de connexion animé

Un code par youssefdahroug2005

Un code du texte

HTML

CSS

JS

Recommandé

Formulaire de connexion animé

Un code par youssefdahroug2005

Un code du texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS