MegaWeb.su как создать свой сайт через html

Как сделать эффект нажатой кнопки
Представляю вашему вниманию самый простой способ создания эффекта нажатия кнопки для навигации сайта. Код меню валидный DTD XHTML 1.0 Strict. Способ на столько прост, что и описывать нечего, приведу сразу пример готового кода.
Эффект создаётся путём изменения цвета рамки и смещения якоря ссылки при наведении курсора мыши на ссылку навигации.

Код горизонтального меню:

HTML код

<div id="vdknopka1">
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
        </div>

CSS стили

#vdknopka1 {
 text-align:center; 
 width:41em; 
 margin:0 auto;
  }
#vdknopka1 a, #vdknopka1 a:visited {
 position:relative; 
 text-decoration:none; 
 text-align:center; 
 background-color:#9ab; 
 color:#fff; 
 border:2px solid #fff; 
 border-color:#def #678 #345 #cde; 
 padding:0.25em 2em; 
 margin:0.5em auto;
  }
#vdknopka1 a:hover {
 top:2px; 
 left:2px; 
 color:#fff; 
 border-color:#345 #cde #def #678;
  }

__________________________________________________________________________________________

Код вертикального меню (HTML) такой же, только другой идентификатор (id):

HTML код

<div id="vdknopka">
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 1</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 2</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 3</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 4</a>
            <a title="MegaWeb.su - уютный уголок для web-мастера" href="http://megaweb.su/">Пункт 5</a>
        </div>

CSS код

#vdknopka a, #vdknopka a:visited {
 position:relative; 
 text-decoration:none; 
 text-align:center; 
 background-color:#9ab; 
 color:#fff; 
 display:block; 
 width:10em; 
 border:2px solid #fff; 
 border-color:#def #678 #345 #cde; 
 padding:0.25em; 
 margin:0.5em auto; 
 }
#vdknopka a:hover {
 top:2px; 
 left:2px; 
 color:#fff; 
 border-color:#345 #cde #def #678; 
 }

Посмотреть пример горизонтальная и вертикальная навигация для сайта с эффектом нажатой кнопки

Вот и всё.
Пользуйтесь на здоровье! Так же не забываем комментировать и добавлять новость в закладки.