Because sharing is caring

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

2 Comments on “Those fancy GMail buttons”

  1. 1 Bart's notes » Blog Archive » Those fancy GMail buttons, with actual buttons! said at 1:43 pm on August 25th, 2010:

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

  2. 2 How to make those fancy GMail buttons? » Blog » Steven Thuriot.be said at 10:57 pm on August 25th, 2010:

    [...] look from the start. Something had to change and it had to change fast. The other day, my friend Bart posted an article about creating your own GMail buttons. An excellent opportunity for me to start [...]

Leave a Reply