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

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

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

Этот метод использует стандартные <button>теги HTML, 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 готова. Если нужен другой цвет и форма, просто создайте свое изображение для фона, колдуйте над стилем, ограничением является только объем вашей фантазии.

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