Formulario de inicio de sesión turco HTML

Abrir en el editor Publica tu código

Recomendado

13 July 2024

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #1f1c2c, #928dab);
  font-family: 'Segoe UI', sans-serif;
}

.container {
  perspective: 1000px;
}

.form-box {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
  width: 320px;
  padding: 30px;
  transform-style: preserve-3d;
  transition: transform 0.6s ease;
}

.form-box:hover {
  transform: rotateY(10deg) rotateX(10deg) scale(1.03);
}

h2 {
  text-align: center;
  color: white;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

label {
  color: #eee;
  margin-bottom: 5px;
}

input {
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  outline: none;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  transition: background 0.3s ease;
}

input:focus {
  background: rgba(255, 255, 255, 0.4);
}

button {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: #00bcd4;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s ease;
}

button:hover {
  background: #0097a7;
}

Formulario de inicio de sesión turco HTML

Recomendado

Botón de descarga animado

Pantalla de bienvenida

Un código de Mete

HTML

CSS

JS

Recomendado

Botón de descarga animado

Pantalla de bienvenida

Un código de Mete

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS