Как создать CSS кнопку

Все мы уважаем CSS кнопки (ссылки, оформленные стилями). Они выглядят эффектно, занимают мало место, привлекают внимание посетителя.
Например, самый распространённый кнопко - это "скачать" или download. Чтобы толковые и бестолковые (есть и такие) не прошли мимо (а то будут потом писать в комментах "а где обещанный файл?"), веб-мастера всячески старают акцентировать внимание на таких веб-элементах.

Для начала посмотрим на CSS кнопку:


Скачать файл

Этот файл скачали раз.

Исходник этой кнопки будет таким:
CSS код:

<style>
.button {
   border-top: 1px solid #96d1f8;
   background: #003859;
   background: -webkit-gradient(linear, left top, left bottom, from(#00ddf5), to(#003859));
   background: -webkit-linear-gradient(top, #00ddf5, #003859);
   background: -moz-linear-gradient(top, #00ddf5, #003859);
   background: -ms-linear-gradient(top, #00ddf5, #003859);
   background: -o-linear-gradient(top, #00ddf5, #003859);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #45a1d6;
   background: #45a1d6;
   color: #ccc;
   }
.button:active {
   border-top-color: #83ccfc;
   background: #83ccfc;
   }
</style>

HTML код:

<a href="http://адрес_ссылки" rel="nofollow" class="button">Скачать файл</a>

Ну и самый главный вопрос: как я получил весь CSS код?

Конечно все цвета и градиенты выписывались явно не руками, а в

Генераторе CSS кнопок ↓

Скриншот генератора:

Собственно, двигаем ползунки, выбираем размеры с цветами, получаем CSS код, который доступен внизу страницы или во всплывающем окне при нажатии на центральную демо-кнопку.
Пока это всё дело экспериментально, надо ещё со шрифтами разобраться, которые я не вижу (в PC BSD свои шрифты), поэтому можно выкинуть строчку font-family, если нужны шрифты со своего блога. Главный класс button тоже можно изменить и в стилях и в ссылке, если вдруг он пересекается с существующим классом в вашем блоге.

По мотивам этой статьи.