Simple CSS3 Comment Form

by kushsolitary

A very beautiful and simple CSS3 comment form with a nice button. Nothing special here. If you don't like it, move on to the next item :D

HTML

<div id="comment_form">
	
	<div>
		<input type="text" name="name" id="name" value="" placeholder="Name">
	</div>
	<div>
		<input type="email" name="email" id="email" value="" placeholder="Email">
	</div>
	<div>
		<input type="url" name="website" id="website" value="" placeholder="Website URL">
	</div>
	<div>
		<textarea rows="10" name="comment" id="comment" placeholder="Comment"></textarea>
	</div>
	<div>
		<input type="submit" name="submit" value="Add Comment">
	</div>
	
</div>

CSS

body {
	font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
	font-size: 13px;
}

#comment_form input, #comment_form textarea {
	border: 4px solid rgba(0,0,0,0.1);
	padding: 8px 10px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	
	outline: 0;
}

#comment_form textarea {
	width: 350px;
}

#comment_form input[type="submit"] {
	cursor: pointer;
	background: -webkit-linear-gradient(top, #efefef, #ddd);
	background: -moz-linear-gradient(top, #efefef, #ddd);
	background: -ms-linear-gradient(top, #efefef, #ddd);
	background: -o-linear-gradient(top, #efefef, #ddd);
	background: linear-gradient(top, #efefef, #ddd);
	color: #333;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
	border: 1px solid #ccc;
}

#comment_form input[type="submit"]:hover {
	background: -webkit-linear-gradient(top, #eee, #ccc);
	background: -moz-linear-gradient(top, #eee, #ccc);
	background: -ms-linear-gradient(top, #eee, #ccc);
	background: -o-linear-gradient(top, #eee, #ccc);
	background: linear-gradient(top, #eee, #ccc);
	border: 1px solid #bbb;
}

#comment_form input[type="submit"]:active {
	background: -webkit-linear-gradient(top, #ddd, #aaa);
	background: -moz-linear-gradient(top, #ddd, #aaa);
	background: -ms-linear-gradient(top, #ddd, #aaa);
	background: -o-linear-gradient(top, #ddd, #aaa);
	background: linear-gradient(top, #ddd, #aaa);	
	border: 1px solid #999;
}

#comment_form div {
	margin-bottom: 8px;
}

Browser Screenshots (1)

Load Hide

More Items

Add New Comment

Showing Comments

Dan

Is there anyway to turn of the adjustment icon in the corner of the text box?

3 Months ago

Quanta

resize: none;

3 Months ago

Dan

ok, thanks.

what about like on youtube comment box where the text area just goes up or down?

3 Months ago

Quanta

that is done with Javascript. Lots of similar plugins available, just need to google. A quick googling found me this – http://www.jsplugins.com/Scrip…

3 Months ago

Quanta

Also check this Post – http://css-tricks.com/textarea…

3 Months ago

Submit Your Creation

Submissions are most welcome! Also Share your feedbacks (using the feedback button on the right) and help us improve.

Join us on Google+ now.

Follow @cssdeck

About

A Collection of Pure CSS Creations! Let's form a big collection of items built with pure CSS and HTML and help frontend coders realize the power and flexibility of CSS. Hopefully the creations will help them get better at the new features of CSS (and in general too) and they'll start making more use of it in their projects :)

Lots of new exciting features coming soon! Stay Tuned.

Login with

Twitter

Github

Simple CSS3 Comment Form

HTML

CSS

Browser Screenshots (1)

More Items

The Laughing Man Logo

Estreleira: Galician...

Ui Parade's CSS Ribbon on...

Zocial (Social Media)...

Pure CSS3 Hidden Text...

CSS Buttons with...

Fancy 3D-Button

StarBust HTML5/CSS3

Add New Comment

Showing Comments

Dan

Quanta

Dan

Quanta

Quanta

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Simple CSS3 Comment Form

HTML

CSS

Browser Screenshots (1)

More Items

The Laughing Man Logo

Estreleira: Galician...

Ui Parade's CSS Ribbon on...

Zocial (Social Media)...

Pure CSS3 Hidden Text...

CSS Buttons with...

Fancy 3D-Button

StarBust HTML5/CSS3

Add New Comment

Showing Comments

Dan

Quanta

Dan

Quanta

Quanta

Submit Your Creation

Share

About

Login with

Recent Posts

Recent Snippets

Tags

Share a Feedback