Formulario de contacto con CSS

Publica tu código

Recomendado

13 June 2025

reclutamiento de fuerzas especiales

index.html

styles.css

@import "https://fonts.googleapis.com/css?family=Poppins";
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #333;
  font-family: Poppins;
  text-transform: uppercase;
  font-size: 11px;
  background: #0f0c29; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #24243e,
    #302b63,
    #0f0c29
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
h1 {
  margin: 0;
}
#contact {
  margin: 4em auto;
  width: 100px;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  border: 1px solid white;
}

#contact:hover {
  background: #000000;
}
#contact:active {
  background: #444;
}

#contactForm {
  display: none;

border: 6px solid 3324be;
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  border-radius: 16px;
}

input,
textarea {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 15px;
}
textarea {
  height: 80px;
  resize: none;
}

.formBtn {
  outline: 0;
  background: #3324be;
  width: 140px;
  height: 30px;
  border: 0;
  color: #ffffff;
  font-size: 1.2em;
  border-radius: 15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}

Formulario de contacto con CSS

Recomendado

Un código de Metehan

Un código de Mikeykun

reclutamiento de fuerzas especiales

index.html

styles.css

main.js

Recomendado

Un código de Metehan

Un código de Mikeykun

reclutamiento de fuerzas especiales

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js