css кнопки
В последнее время в web сфере прослеживается тенденция
"clean style" - минимальное использование изображений в дизайне сайта, Многие web-мастера стараются как можно больше
уделять внимание использованию стилей (css). В связи с этим актуальными становятся вопросы типа "а как же сделать чтото без изображений?". В данной статье будет расмотрен
способ создания кнопки без изображений, только средствами css.
Основными преймуществами css кнопок над картинками можно назвать:
- Видимость текста кнопки для поисковых роботов. Это дает возможность создавать красивые кнопки на сайте и при это быть уверенными, что они будут эффективными для раскрутки.
- Меньший вес сайта. Так как любое изображение весит больше чем стили для css кнопки.
- Возможность легкого изменения текста кнопки. Это позволяет не создавать десятки или даже сотни изображений с заготовленными текстами кнопок, в случае с css можно хоть каждый день без проблем менять текст кнопки, а при минимальном знании php эту задачу можно во много раз облегчить.
Теперь давайте рассмотрим один из многих способов как сделать
css кнопку:
В html для кнопки нужно всего лишь использовать обычный тег для ссылок на который ставится класс с описание кнопки:
<a class= "css_button" href="#">css кнопка</a>
Описание стилей для кнопки:
.css_button {
display:block;
background:#EBEBEB;
border:1px solid #999999;
width:80px;
height:20px;
text-align:center;
text-decoration:none;
}
.css_button:hover {
border-top:none;
border-left:none ;
text-decoration:none;
}
Я думаю все эти
css свойства не должны вызвать проблем с пониманием. Уточню только, что
display:block; превращает ссылки в блочный элемент, что дает нам большие возможности для манипулирования стилями.
Вуа ля! Мы получили простейшую
css кнопку.
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.