Because sharing is caring

Those fancy GMail buttons, with actual buttons!

Posted: August 25th, 2010 | Author: | Filed under: css, Web Development | Tags: , , , | 1 Comment »

After my post about gmail buttons yesterday, my friend Steven started working on that code.

He came up with an improved version of my example, one that works with actual buttons! Let me demonstrate below:

CSS Code:

input[type="button"], input[type="submit"], button {
margin:0 8px 0 0;
padding:2px 6px;
 
text-align:center;
vertical-align:middle;
 
display: inline-block;
white-space:nowrap;
cursor: pointer;
 
outline:none;
color:#000;
border: 1px solid #bbb;
 
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
 
background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3));
background: -moz-linear-gradient(top, #f9f9f9, #e3e3e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e3e3e3');
 
border-top-color:#ccc;
border-bottom-color:#a0a0a0;
}
 
input[type="button"]:hover, input[type="submit"]:hover, button:hover {
border: 1px solid #636363;
}
 
input[type="button"]:active, input[type="submit"]:active, button:active {
background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f9f9f9));
background: -moz-linear-gradient(top, #e3e3e3, #f9f9f9);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e3e3e3', endColorstr='#f9f9f9');
}

HTML can be any of the following:

<input type="button" value="it's a button" />
<input type="submit" value="it's a submit button" />
<button>It's a button button</button>

See that code in action right here:

The link to Steven’s post: credit goes where credit is due

P.S.:I know the hover border doesn’t work here, it does work where I implemented the buttons. I’ll look at this later

Update: Xavier Bertels from Live Graphics also had a go at the buttons
This is becoming more and more of a team effort, love it!

Those fancy GMail buttons

Posted: August 24th, 2010 | Author: | Filed under: css, Javascript, Web Development | Tags: , , , | 2 Comments »

For a project I’ve been working on, I wanted to use a different kind of button then the normal HTML .

I decided to go for the GMail style button!
They’re really nice:

  • simple HTML
  • still looks like a button (user friendlyness++)
  • has a modern look aswell

It’s been done before by stopdesign.com, but I wanted to do it myself
I went to dive in some Google CSS and came up with the following:
CSS:

.btn{
	margin:0 8px 0 0;
	padding:3px 8px;
	text-align:center;
	vertical-align:middle;
	white-space:nowrap;
	cursor:default;
	outline:none;
	font:arial,sans-serif;
	color:#000;
	border:	1px solid #bbb;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius: 3px;
	background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#e3e3e3)); 
        background: -moz-linear-gradient(top, #f9f9f9, #e3e3e3);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#e3e3e3');
	border-top-color:#ccc;
	border-bottom-color:#a0a0a0;
	cursor: pointer;
	display: inline-block;
	position: relative;
}
.btn:hover{
	border: 1px solid #636363;
}

Now simply make all your buttons like so:

<div class="btn"><span>Cooler button!</span></div>

which gives you this:

Cooler button!

Strong note: These aren’t actually buttons, they can’t really be used as form-submit buttons as they can only respond to Javascript onClick events! My newer post on the real buttons does do this!
Tested in FF 3.6, Chrome 5, IE8