सीएसएस कॉन्टैक्ट फॉर्म

अनुशंसित

14 May 2025

ग्रेडिएंट लॉगिन फॉर्म HTML CSS

20 October 2024

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

सीएसएस कॉन्टैक्ट फॉर्म

अनुशंसित

ग्रेडिएंट लॉगिन फॉर्म HTML CSS

सीएसएस ग्रेडिएंट बटन

एचटीएमएल रजिस्टर फॉर्म

index.html

styles.css

main.js

अनुशंसित

ग्रेडिएंट लॉगिन फॉर्म HTML CSS

सीएसएस ग्रेडिएंट बटन

एचटीएमएल रजिस्टर फॉर्म

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js