Статичные

Большой плюс статики - использование своих шрифтов, оригинального оформления и разных стилей кнопок. Отлично подходит для небольших проектов, где кнопки не надо клепать каждый раз для нового раздела и под разным языком.

Такой подход используют к примеру iLoveCinema.ru, imeem.com, cnn.com, li.ru, toodoo.ru, bobrdobr.ru, blog.ru

Динамичные

Динамические кнопки можно делать по-разному. Самые простые:

1. Генерировать на лету при помощи php. Удобно когда проект мало посещаем и часто изменяется - всевозможные сайты под ключ, админки.
2. Использовать только gradient-фон. Немного украшает кнопки, оставаясь всё-таки немного аскетичным из-за строгих углов. Для эффектности можно использовать границы с эффектом выступов
   feedburner.com, youtube.com
3. Использовать готовый фон + текст поверх.
   Это наиболее широко обсуждаемые решения, потому что нуждаются в балансе минимализма кода и красоты визуальной.

Последний пункт и рассмотрим..

Несемантические

Самый простой вариант несемантических конструкций это таблица с тремя ячейками или вот такой мега-div, взятый с новой вёрстки sape.ru, сделанный видимо в Garin Studio. Этот вариант используется в старых проектах, либо когда нет больше сил и умения разбираться с неправильным показом в разных браузерах.

<div class="error_message"><div class="lt"><div class="rt"><div class="rb"><div class="lb">
<p>Нет заявокp>
div>div>div>div>div>

Yahoo.com, sape.ru

Любимые уголки

Углы, если они не сделаны при помощи техники закругления при помощи javascript (создавая кучу попиксельных элементов)

1. Одна фоновая картинка, с фиксированной шириной. Просто, но не гибко.
   MirTesen.ru
2. Физически одна фоновая картинка и несколько DOM-элементов, использующих её с указанием background-position. Закруглённые углы не прозрачные а цвет фона как у страницы, как правило белый
   Google.com/Reader

Уголки с дверями

В технике "sliding doors" используются два DOM-элемента и две картинки, одна из которых - уголки справа, а другая - уголки слева и фон. Хорошо что не надо много html-кода и получается функционально. Минус - очень длинные или двуярусные (вертикально расширяющиеся) кнопки не получится сделать.
<button><span>Button Titlespan>/button>

В ходе изучения особенностей вёрстки такой семантики я заметил насколько важны некоторые css параметры, а именно line-height:

button{padding:0;border:0;background:url("img/button/black_left.png") no-repeat left;}
button span{line-height:31px;display:block;padding:0 10px 0 10px;background:url("img/button/black_right.png") no-repeat right;}
button:hover{} //change background
button:hover span{} //change background

См. также

• MyMans - css копки
• HowTo - sexy css buttons
  
• Как оптимизировать загрузку кнопок
• Styling the button with sliding doors
• Очень популярный блог об истории кнопки
  
• Devoid - улучшение submit в форме
• Чернев.ру - делаем красивые кнопки