Страница 1 из 11
Форум » Web дизайн » HTML и CSS » Простые кнопки (HTML & CSS)
Простые кнопки
Reddy Дата: Понедельник, 11.10.2010, 22:49 | Сообщение # 1
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
На данном примере рассмотрим создание простых динамических кнопок, которые могут найти широкое применение на любом сайте. Например, такие кнопки используются на нашем форуме (Кнопки "Профиль", "ЛС" и пр.).

Допустим, у нас есть ссылка:

Code
<a href="/">Профиль</a>

Первым делом нужно добавить класс к данной ссылке, например "www"

Code
<a href="/" class="www">Профиль</a>

На этом работа с HTML закончена, переходим непосредственно к таблице стилей.

Необходимо в таблицу стилей добавить сей класс (www):

Code
a.www {
}

Теперь начнём придавать кнопке необходимый внешний вид, например такой:

Code
a.www {
       background: #1f1f1f; /* цвет фона кнопки */
       border: 1px solid #4f4f4f; /* размер (1px), тип (solid), и цвет (#4f4f4f) рамки */
       color: #7fdf00; /* цвет текста внутри кнопки */
       font: 11px Verdana; /* размер и тип шрифта */
       margin: 2px; /* пространство (отступ) вокруг кнопки */
       padding: 3px 5px; /* отступ от текста кнопки до рамки (ака размер кнопки) */
       text-decoration: none; /* убирает подчеркивание для ссылки */
}

Добавлю, что background, color, font и text-decoration можно исключить, если их значение уже задано в CSS для родительских элементов.

следующий шаг - сделать стиль для кнопки, на которую будет наведён курсор мыши.

Вариант 1. Например, при наведении у кнопки будет меняться цвет фона и рамки:

Code
a.www:hover {
        background: #373737;  /* цвет фона кнопки */
        border: 1px solid #7fdf00; /* размер (1px), тип (solid), и цвет (#7fdf00) рамки */
}

Вариант 2. При наведении будет меняться цвет фона и цвет букв:

Code
a.www:hover {
        background: #7fdf00;  /* цвет фона кнопки */
        color: #1f1f1f; /* цвет текста внутри кнопки */
}

Вариант 3. Можно для кнопки использовать и фоновые изображения:

Code
a.www {
background: url('back.png'); /* фоновая картинка кнопки */
color: #7f7f7f; /* цвет текста внутри кнопки */
font: 11px Verdana; /* размер и тип шрифта */
margin: 2px; /* пространство (отступ) вокруг кнопки */
padding: 4px 6px; /* отступ от текста кнопки до рамки (ака размер кнопки) */
text-decoration: none; /* убирает подчеркивание для ссылки */
}
a.www:hover {
background: url('hover.png'); /* фоновая картинка кнопки при наведении */
color: #dfdfdf; /* цвет текста внутри кнопки при наведении */
}

Все три варианта в действии можно посмотреть здесь

спец по кнопачкам
 
Hunt Дата: Вторник, 12.10.2010, 19:11 | Сообщение # 2
Hunt
Прохожий
Сообщений: 2
Репутация: 2
Страна: Российская Федерация
Статус: Offline
Не до конца понял как внедрить такое на юкозовский сайт

Всякие $USER_DETAILS_ICON_BAR$, $ENTRY_MANAGE_ICON_BAR$ и прочие $ON_TOP_ICON$ надо убрать, а вместо них добавить код для каждой кнопки в отдельности, так? Чтоб кнопка не высвечивалась без дела используем условные операторы, верно? Если все предыдущее верно, то как сделать чтоб кнопки "Удалить", "Редактировать" и прочие были доступны тем, кому должны быть доступны, и в тех постах, в которых должны быть.

 
Reddy Дата: Вторник, 12.10.2010, 19:36 | Сообщение # 3
Reddy
Новичок
Сообщений: 129
Репутация: 14
Страна: Латвия
Статус: Offline
Quote (Hunt)
Всякие $USER_DETAILS_ICON_BAR$, $ENTRY_MANAGE_ICON_BAR$ и прочие $ON_TOP_ICON$ надо убрать, а вместо них добавить код для каждой кнопки в отдельности, так?

абсолютно верно yes

Quote (Hunt)
Чтоб кнопка не высвечивалась без дела используем условные операторы, верно?

и тут тоже всё правильно

Quote (Hunt)
Если все предыдущее верно, то как сделать чтоб кнопки "Удалить", "Редактировать" и прочие были доступны тем, кому должны быть доступны, и в тех постах, в которых должны быть.

Так же, как и в предыдущем случае - с помощью условных операторов:

Code

<?if($QUOTE_URL$)?><a href="$QUOTE_URL$" class="www">Цитата</a><?endif?>
<?if($EDIT_URL$)?><a href="$EDIT_URL$" class="www">Редактировать</a><?endif?>
<?if($DELETE_URL$)?><a href="$DELETE_URL$" class="www">Удалить</a><?endif?>
<?if($DEL_ENTRY_FIELD$)?>$DEL_ENTRY_FIELD$<?endif?>
<?if($REPORT_URL$)?><a href="$REPORT_URL$" class="www">Настучать!</a><?endif?>
<a href="javascript:scroll(0,0);" class="www">^</a>

:)

спец по кнопачкам
 
Форум » Web дизайн » HTML и CSS » Простые кнопки (HTML & CSS)
Страница 1 из 11
Поиск:
Rambler's Top100 Рейтинг@Mail.ru Яндекс.Метрика
Полное или частичное копирование материалов только с указанием гиперссылки на www.otherside.ws

© 2010-2017 Other Side | Хостинг от uCoz