Совет 1: Как сделать красивую кнопку

Путешествуя по просторам интернета, пользователи часто обращают внимание на графическое оформление ресурсов. Это важный параметр любого сайта. От внешнего вида страницы зависит, останется посетитель на ней или закроет и уже никогда её не посетит. Поэтому графике сайта придают особое значение. Но при украшении ресурса не следует забывать и о его функциональности. Ссылки должны быть похожи на ссылки, а кнопки – на кнопки.
Инструкция
1
Чтобы сделать красивое оформление для сайта вам понадобятся знания графических редакторов. Один из лидеров в этой области – это Adobe Photoshop. Откройте вашу программу. Создайте новый документ с параметрами указанными на изображении.
Как сделать красивую <strong>кнопку</strong>
2
Залейте фон цветом «bfbfbf». С помощью инструмента «перемещение» установите горизонтальную и вертикальную направляющие по центру документа. Выберите инструмент «прямоугольник с закругленными краями». Обратите внимание, он должен находиться в режиме «слой фигура». Наведите курсор на центр документа, нажмите левой кнопкой мыши и одновременно удерживайте клавишу «Alt». Нарисуйте прямоугольник. Откройте стили слоя и установите параметры, которые указаны на изображении.
Как сделать красивую <strong>кнопку</strong>
3
Зажмите на клавиатуре клавишу «Ctrl» и кликните левой кнопкой мыши по слою с фигурой. Загрузится выделение. Возьмите с панели инструментов «прямоугольное выделение». Установите его в режиме вычитания. Очертите верхнюю часть выделения. Создайте новый слой и залейте его белым цветом. Установите прозрачность слоя на 20%.
Как сделать красивую <strong>кнопку</strong>
4
Возьмите инструмент «текст». Напишите нужное вам слово. Установите шрифт, размер и начертание текста. Зайдите в стили слоя и задайте следующие параметры. Ваша кнопка готова.
Как сделать красивую <strong>кнопку</strong>
5
Теперь проверим её на точные пиксели. Возьмите инструмент «увеличение». Максимально увеличьте размер кнопки. Внимательно просмотрите все края. Они должны иметь четкие границы. Никаких переходных цветов. Если формы не четкие - загрузите функцию «свободное трансформирование» и клавишами управления поправьте форму кнопки. Теперь вы можете разместить её на вашем сайте.
Как сделать красивую <strong>кнопку</strong>

Совет 2: Как сделать кнопку в html

Создание кнопок в HTML осуществляется при помощи тегов <input> и <button>. Они являются неотъемлемой частью практически любого интерфейса и помогают отправлять необходимую информацию скрипту-обработчику или очищать уже заполненные формы.
Инструкция
1
Использование дескриптора <input> добавляет на страницу кнопку с именем name и значением value. Атрибут name задает элементу уникальный идентификатор и используется для определения обработчиком формы его значения. Value выводит необходимый текст поверх. Например, для создания кнопки запишите следующий код:

<form>
<input type = “button” name = “имя” value = “Отправка”>
</form>

Данная команда создаст кнопку с именем button и надписью «Отправка» на ней.
2
Дескриптор <button> создает аналогичный <input> элемент, однако предлагает для использования множество дополнительных параметров, которые могут понадобиться веб-разработчику. Так, поверх <button> можно наложить таблицу или изображение, форматированный текст или список. Например:

<button form = “id формы” formaction = “адрес” formmethod = “метод пересылки данных” name = “имя” type = “тип” value = “значение”><img src = “путь до изображения”><b>Текст</b></button>
3
Атрибут form задает идентификатор формы, который будет использоваться для обработки данных. Formaction устанавливает обработчик формы в другой части документа, другом файле или сайте. Formmethod отвечает за определение метода пересылки данных. Name задает имя кнопке, type – тип (обычная, для отправки данных или для очистки формы). Value – значение, которое будет считываться скриптами. На кнопке будет отображаться изображение с указанным адресом и жирный текст.
4
Чтобы создать кнопку, которая будет обрабатывать введенные данные, необходимо в атрибуте указать соответствующий тип:

<input type = “submit”>

Чтобы создать кнопку, стирающую введенные пользователем данные, задайте type = “reset”.
Обратите внимание
Дескриптор <input> должен обязательно использоваться в качестве содержимого тега <form>. Кнопка <button> может быть отображена и вне формы, однако для обработки данных и выполнения определенного действия она также должна быть заключена между <form></form>.
Видео по теме
Поиск
Совет полезен?
Добавить комментарий к статье
Осталось символов: 500