Example :)
Contact Message
Source Code :)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Contact Message Form Using HTML & CSS | Pure Coding</title>
</head>
<body>
<div class="container">
<h2>Contact Message</h2>
<form>
<div class="input-box">
<input type="text" placeholder="Enter your Name" required>
</div>
<div class="input-box">
<input type="email" placeholder="Enter a valid Email" required>
</div>
<div class="input-box">
<input type="text" placeholder="Enter Subject" required>
</div>
<div class="input-box">
<textarea placeholder="Enter Message" required></textarea>
</div>
<div class="input-box input-btn">
<button>Send Message</button>
</div>
</form>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(23deg, rgba(253,206,88,1) 0%, rgba(255,84,41,1) 40%, rgba(189,43,188,1) 80%, rgba(2,67,223,1) 100%);
padding: 20px;
}
.container {
background: #FFF;
padding: 2rem;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.5);
border-top: 4px solid royalblue;
width: 900px;
}
.container h2 {
color: royalblue;
font-size: 2rem;
text-align: center;
margin-bottom: 20px;
}
.container .input-box {
width: 100%;
min-height: 40px;
margin-bottom: 20px;
}
.container .input-box input, .container .input-box textarea {
width: 100%;
height: 100%;
background: #FFF;
border: none;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
padding: 10px;
border-radius: 30px;
font-size: .8rem;
transition: .3s;
}
.container .input-box textarea {
min-height: 150px;
padding-top: 15px;
padding-left: 15px;
}
.container .input-box input:hover, .container .input-box input:focus, .container .input-box input:valid, .container .input-box textarea:hover, .container .input-box textarea:focus, .container .input-box textarea:valid {
box-shadow: 0 0 10px rgba(0,0,0,0.1),
0 0 20px rgba(0,0,0,0.1);
}
.container .input-btn {
width: 100%;
display: flex;
justify-content: center;
}
.container .input-btn button {
padding: .7rem 2rem;
border: none;
background: transparent;
font-size: 1rem;
text-align: center;
background: linear-gradient(23deg, rgba(253,206,88,1) 0%, rgba(255,84,41,1) 40%, rgba(189,43,188,1) 80%, rgba(2,67,223,1) 100%);
background-size: 400%;
color: #FFF;
animation: animatebtn 8s infinite;
cursor: pointer;
border-radius: 30px;
box-shadow: 5px 5px 10px tomato;
}
@keyframes animatebtn {
0% {
background-position: 400%;
}
100% {
background-position: 100%;
}
}
