My (mostly technical) blog

Posts Tagged ‘css

I shamelessly ripped of the form designed at this excellent blog to use a somehow modified CSS structure.

The CSS button classes are customizable to allow positive/negative action buttons with different CSS images.

body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}

form.cleanform{
	margin:0 auto;
	width:400px;
	padding:14px;
	border:solid 2px #b7ddf2;
	background:#EAFFD5;
}

form.cleanform div.header {
	border-bottom:solid 1px #b7ddf2;
	font-size:11px;
	margin-bottom:20px;
}

form.cleanform div.header h1 {
	font-size:14px;
	font-weight:bold;
	margin-bottom:8px;
}

form.cleanform div.header .description {
	color: #666666;
}

form.cleanform p{
	font-size:11px;
	margin-bottom:20px;
}

form.cleanform label{
	display:block;
	font-weight:bold;
	text-align:right;
	width:140px;
	float:left;
}

form.cleanform .small{
	color:#666666;
	display:block;
	font-size:11px;
	font-weight:normal;
	text-align:right;
	width:140px;
}

form.cleanform input{
	float:left;
	font-size:12px;
	padding:4px 2px;
	border:solid 1px #aacfe4;
	width:200px;
	margin:2px 0 20px 10px;
}

/* Button main class */
form.cleanform input.button {
	float:none;
	width:125px;
	height:30px;
	text-align:left;
	line-height:20px;
	color:#FFFFFF;
	font-size:11px;
	font-weight:bold;
	
	background-color:#f5f5f5;
    border:1px solid #dedede;
    border-top:1px solid #eee;
    border-left:1px solid #eee;
	
	font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:90%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
	
	background-position: 6px;
	background-repeat:no-repeat;
	text-indent:30px;
	
	margin: 0;
	padding: 0;
}


/* Positive button */
form.cleanform input.button.positive {
	color::#529214;	
}

form.cleanform input.button:hover.positive {
	background-color:#E6EFC2;
    border:1px solid #C6D880;
    color:#529214;
}

/* Negative button */
form.cleanform input.button.negative {
	color::#d12f19;	
}

form.cleanform input.button:hover.negative {
	background-color:#fbe3e4;
    border:1px solid #fbc2c4;
    color:#d12f19;
}

/* Button images */
form.cleanform input.button.add {
	background-image:url(add.png);
}

form.cleanform input.button.delete {
	background-image:url(delete.png);
}
<form class="cleanform" name="form" method="post" action="form.html">
		
			<div class="header">
				<h1>Sign-up form</h1>
				<p class="description">This is the basic look of my form without table</p>
			</div>
			
			<p>
				<label>Name
					<span class="small">Add your name</span>
				</label>
				<input type="text" name="name" id="name" />
			</p>
			
			<p>
				<label>Email
					<span class="small">Add a valid address</span>
				</label>
				<input type="text" name="email" id="email" />
			</p>
			
			<p>
				<label>Password
					<span class="small">Min. size 6 chars</span>
				</label>
				<input type="password" name="password" id="password" />
			</p>
			
			<div style="float:right">
				<input type="submit" name="submit" class="button positive add" value="Sign-up" />
				<input type="submit" name="submit" class="button negative delete" value="Cancel" />
			</div>
			
			<div class="spacer"></div>
			
		</form>

Download here

Tags: , ,

I made up this solution inspired by the post and comments on this excellent blog

<a href="#" class="button add">Add</a>
<a href="#" class="button delete">Delete</a>
a.button{
	display:block;	
	background-position: 6px;
	background-repeat:no-repeat;
	font-weight:bold;
	font-family: Trebuchet MS, Tahoma, sans-serif;
	font-size: 0.7em;	
	text-decoration:none;
	text-indent:30px;
	color:#555555;
	background-color:#EAEAD7;
	border:#CCCCCC solid 1px;
	height:30px;
	width:190px;
	line-height:30px;
}
	
a:hover{
	background-color:#F3F3E9;
	color:#737373;
}

.add {
	background-image:url(add.png);
}

.delete {
	background-image:url(delete.png);
}

any idea how can I put those buttons next to each other instead of below each other?
I tried removing the display:block from the but the button collapsed!

Update:
If you want to align the buttons next to each other, add

float:left;

to the CSS class of a.button, thanks to Stephan!

Download here

Tags: , ,

Ahmed Sabbour's Facebook profile
June 2017
S M T W T F S
« Jul    
 123
45678910
11121314151617
18192021222324
252627282930  

Tweets

Error: Twitter did not respond. Please wait a few minutes and refresh this page.

RSS StackOverflow

Recently bookmarked