Кнопки для сайта на CSS 3

Добавлен: 2011-12-11 04:53:50

Кнопки для сайта на CSS 3

Не для кого не секрет, что кнопки, ведущие в различные разделы и страницы сайта должны быть текстовыми. Причиной такого обязательства есть несколько факторов:

Во первых, ссылки выполнение при помощи изображений, JS скриптов, Flash технологий ил любых других, не будут нести никакой информации для поисковых машин, а следовательно, грош цена таким сайтам.

Во вторых, используя именно текстовые ссылки вы сильно сокращаете размер страницы, и как следствие ускоряете загрузку страницы в браузере.

Используя текстовые ссылки, вы без проблем сможете добавлять ссылки при помощи любых серверных скриптов, а используя, например Flash, вам придётся вручную изменять своё меню.

Текстовые ссылки будут работать всегда! – чего нельзя сказать про ссылки на JS или Flash, которые не будут работать если у пользователя отключено выполнение JS или не установлен Flash player.

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

Используя современные технологии CSS 3, можно создать очень красивые кнопки.

Ну собственно сам код CSS:

.css_button {
display:block;
box-shadow:0px 0px 1px 1px #dcdfe4;
border:1px #c1c1c1 solid;
border-radius:2px;
margin-top:3px;
margin-bottom:3px;
padding:0px 5px 0px 5px;
width:93%;
height:17px;
text-align:left;
font-size:12px;
text-decoration:none;
font-weight:bold;
color:#444444;
background-image: url(/data/button.png);
}
.css_button:hover {
color:#0e76d1;
background-image: url(/data/button_hover.png);
}

А вот так, мы выводим эти кнопочки в браузер:

<a class="css_button" href="index.php">Кнопка</a>

И вот что у нас получилось:

кнопка на css кнопка на css hover

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

Поделиться:

Добавление комментария