Formulaire de contact CSS

Publiez votre code

Recommandé

18 December 2025

@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;
}

Formulaire de contact CSS

Recommandé

Code HTML du jeu Elastic Face

Un code par smartfunction263

Carte de survol Ethereum

index.html

styles.css

main.js

Recommandé

Code HTML du jeu Elastic Face

Un code par smartfunction263

Carte de survol Ethereum

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js