Главная » HTML & CSS » Создание кнопок с помощью CSS, HTML без javascript

Создание кнопок с помощью CSS, HTML без javascript

Какая то фобия у наших пользователей в отношении использования javascript, довольно часто встречаю в комментариях вопросы о том, что при отключенных скриптах в браузерах, что то перестает работать. Люди порой не удосуживаются даже вникнуть в процесс создания того или иного решения.

Ну, а раз есть потребность и неуемное желание не использовать javascript в работе, на примере создания кнопок покажу, как можно создать и придать динамичность вашим кнопкам с помощью чистого , без какого то либо применения javascript.

Создание кнопок с CSS

Этот метод использует стандартные <button>теги , CSS стили для графических настроек и без JavaScript.

Для всего фона самой , мы будем использовать один небольшой файл изображения. Данное решение позволяет создать полностью индивидуальный дизайн, применимый к оформлению нашей . При этом сохраняется возможность использования HTML текста на теле при ее автоматическом увеличении или сокращении в зависимости от длины текста.

Шаг 1: Изображение (button.png)

Скопируйте этот небольшой файл с изображением, в папку где у Вас находятся все картинки для сайта, чаще всего это папка images, или что то в этом роде.
Этот файл станет фоном для будущей кнопки.

Следующим шагом, будет правильная разметка на странице HTML.

Шаг 2: HTML

На этой стадии все до безобразия просто, там где вам необходимо по замыслу или по острой необходимости, в теле вашей страницы следует прописать следующий код:

<div class="buttons"><button type="submit">КНОПКА</button><span></span></div>

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

Шаг 3: CSS

Чтобы облегчить работу и дабы не захламлять страницы излишним кодом, в вынесенный файл стилей .css, если такой имеется, ну а если нет то все же на странице между тегами head прописываем следующее:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<style>
/* BUTTONS */
buttons button{
cursor: pointer;
cursor: hand;
border: 0;
height: 28px;
float: left;
text-indent: 4px;
text-decoration:none;
font-weight: bold;
text-transform: uppercase;
font-size: 1.2em;
background: url(../images/global/button.png);
}
 
.buttons span{ /* Right-hand corner */
cursor: pointer;
cursor: hand;
display: block;
width: 5px;
height: 28px;
float: left;
background: url(../images/global/button.png) top right;
}
</style>

Пути к картинке могут отличаться от ваших, так что следует помнить о правильности направления, чтобы не получить пустоту вместо кнопки.

Размер текста на кнопке регулируется параметром font-size, можете смело экспериментировать.

Вот и все, наша замечательная кнопка без малейшего javascript готова. Если нужен другой цвет и форма, просто создайте свое изображение для фона, колдуйте над стилем, ограничением является только объем вашей фантазии.

Люди говорят:
 

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru