can't use it

A few weeks ago Google started using imageless buttons which are produced entirely with HTML/CSS. So they don’t use images and are apparently resizable.

The big problem about these buttons are, that in terms of semantical markup, they are a mess.

<div tabindex="0" act="7" class="goog-imageless-button
goog-inline-block goog-imageless-button goog-imageless-button-collapse-right
goog-imageless-button-primary" id="" role="button">
	<div class="goog-inline-block goog-imageless-button-outer-box">
		<div class="goog-inline-block goog-imageless-button-inner-box">
			<div class="goog-imageless-button-pos">
				<div class="goog-imageless-button-top-shadow"></div>

				<div class="goog-imageless-button-content">
					<b>Archive</b>
				</div>
			</div>
		</div>
	</div>
</div>

I personally see no point in using such a tag soup to implement buttons. In the longer run, loading a single image (assuming we’re using a CSS sprite) and using it over and over would consume less bandwidth than using 725 bytes for each button.

The article in StopDesign offers a better way of creating psuedo-rounded-corner buttons with not that much markup. By the clever use of a sprite, they obtain a horizontally and vertically resizable button.

<button class="btn" type="button">
	<span>
		<span>button</span>
	</span>
</button>

Also as they use an image, they have a much smoother gradient, as opposed to Google’s three-striped version.

There is also the jQuery UI approach to the problem, which I find elegant as well. They have a holistic solution to create toolbars and other UI elements.

<div class="fg-buttonset fg-buttonset-single ui-helper-clearfix">
        <button class="fg-button ui-state-default ui-state-active
ui-priority-primary ui-corner-left">Edit</button>
        <button class="fg-button ui-state-default ui-priority-primary
ui-corner-right">View</button>
</div>