Оформление ссылок в виде кнопок

Если на сайте есть ссылка, то лучше всего (особенно для поисковых систем) сделать её, используя тег <a>. Однако это не всегда уместно с точки зрения оформления. Например, меню, чаще всего, оформляют в виде прямоугольных блоков (кнопок), в которых можно кликнуть не только на текст, но и на сам блок. Кроме того эти блоки, обычно, подсвечиваются при наведении на них указателя мыши.

Есть множество способов создать подобное оформление, но большая их часть довольно неудобна в реализации. В последнее время я стал пользоваться самым простым и эффективным, на мой взгляд, решением - оформлением тега <a> в виде блока через CSS. В файл со стилями добавляем следующий класс:

.menu
{
   display: block; /*Даёт возможность назначать размеры элементу*/
   width: 100px;
   padding: 4px;
   margin-bottom: 2px;
  
   border: 1px solid #000;
   background: #DDD;
   color: #000;
   text-decoration: none;
}

.menu:hover /*Для подсветки при наведении мыши*/
{
   background: #EEE; 
}

Применяем это к ссылкам:

<a class="menu" href="http://www.google.ru">Google</a>
<a class="menu" href="http://www.yandex.ru">Яндекс</a>  

Результат:

GoogleЯндекс
Описанный способ не даёт полной свободы в оформлении (хотя CSS 3 в этом поможет), но это, возможно, единственный его недостаток. Преимущества данного способа:

- Не затрудняет работу поисковых систем, что положительно влияет на позицию сайта в результатах поиска.

- Отлично (одинаково) работает во всех современных браузерах.

- Максимально прост в использовании.

- Очень удобно вносить изменения в оформление.

- Можно не использовать изображения.