Опубликовано автор в категориях Верстальщику.

big_cust_button
Не для кого не секрет, что очень часто дизайнеры настолько изощренно поработают над элементами формы, что верстальщику потом приходится часами выдумывать способы реализации подобных задумок. Как правило, хороший дизайн отличается единообразием основных блоков макета и базовых HTML элементов. То есть правилом хорошего тона считается, чтобы все кнопки на вашем сайте по умолчанию имели единый вид (и не только кнопки, но сейчас речь о них). Этого легко добиться, если кнопки в дизайне оформлены по дефолту или в стиле, который легко реализовать простым CSS.

А если, допустим, вам нужно реализовать «резиновые» кнопки с закругленными углами? Тогда стандартными средствами не обойтись. Одним из вариантов реализации такого рода кнопок является замена элемента button группой элементов, которые бы могли помочь реализовать задачу. Как правило, в таких случаях мы используем связку JavaScript+CSS. Сегодня я расскажу об одном автономном скрипте, который помогает оформить все кнопки в нужном нам стиле.

ButtonReplacement.JS

ButtonReplacement.JS — автор Martin Ivanov. Данный скрипт является довольно простым и эффективным методом реализовать кастомизаю обычных HTML кнопок

<input type="button | submit | reset" /> 
<button type="button | submit | reset">...</button>

с минимальным использованием дополнительных элементов. При этом кастомизация не влияет на стандартный функционал элементов.

buttonreplacementjsБесплатная Lite-версия скрипта распространяется под Creative Commons License и содержит три авторских варианта оформления кнопок. Платная версия скрипта стоит 19$ и содержит 12 вариантов оформления, которые показаны на картинке слева.

Для того, чтобы использовать скрипт на своей веб-странице вам нужно скопировать папку с файлами скрипта в папку своего проекта а далее, выполнить следующее:

1. Поместить вызов основного скрипта между <head> ... </head> вашего шаблона

<script type="text/javascript" 
src="Scripts/ButtonReplacement.JS/Scripts/ButtonReplacementJS.js"></script>

2. Открыть основный скрипт по адресу Scripts/ButtonReplacement.JS/Scripts/ButtonReplacementJS.js и изменить три следующие переменные в верхней части файла:

var brjsSkin = 'WeMakeSites'; // Скин который вы будете использовать с ButtonReplacement.JS
var brjsFolder = 'Scripts'; // Корневая директория ButtonReplacement.JS, возможно корневая директория со скриптами на вашем сайте. На демке ButtonReplacement.JS это “Scripts”
var brjsEnabled = true; // Включен или выключен ButtonReplacement.JS? (true | false)

Собственно все. Но, если вам вдруг не подходит оформление, которое предложено в трех бесплатных темах, тога либо покупайте дополнительные, либо…

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

Поствой

Скрипт радио для сайта

узнать ip адрес

2 комментария к записи “Оформление кнопок в форме”

  1. Sergey

    Спасибо, как раз недавно сталкивался с этой проблемой, но договорился сделать округлые кнопки одного размера….

    Ответить
    • Hiway

      Смотри вторую часть статьи, там тоже неплохой вариант. Я бы сказал даже получше.

      Ответить

Оставить комментарий

  • (не будет показан)