Изображение кнопки для профи, техники и инструментов

Для создания профессионального приложения необходимо заменить HTML-кнопки чем-то более привлекательным. Какие ресурсы предлагает стандарт HTML ?
Вот три простых метода, которые можно реализовать, используя изображения, которые можно загрузить или реализовать с помощью программного обеспечения для редактирования (несколько ссылок приведены в приложении).
Они подходят для выполнения трех функций, соответственно:

  1. Кнопка для отправки формы.
  2. Чтобы выполнить сценарий.
  3. Чтобы загрузить другую страницу.

Использовать элемент input type = 'button'

Кнопка HTML изображения является кнопкой отправки формы, она отправляет данные, но можно использовать различные методы для создания кнопок изображения без ограничений.

Если вы хотите использовать этот элемент не для отправки формы, вы помещаете его вне тегов <form> </form>.

Пример:


Исходный код:

<input type="image" src="image/scriptol-light.png" name="Submit" value="Envoyer" 
    onMouseOver="this.src='image/scriptol-dark.png'" 
    onMouseOut="this.src='image/scriptol-light.png'" 
    onMouseDown="this.src='image/scriptol-down.png'" 
    onClick="clickit(this);"
>

Код JavaScript для демонстрации:

function clickit(element)
{
  var x = document.getElementById("storage");
  x.innerHTML="<b>Cliqué!</b>";
  setTimeout(function() { x.innerHTML="";}, 2000);
}

CSS-код не требуется.

Использовать элемент button

Использование элемента <button> более соответствует стандарту, но без атрибута src потребуется добавить CSS-код для отображения изображения, которое будет размещено в качестве фонового изображения.

У этого элемента есть преимущество - возможность отображения текста над изображением, что позволяет использовать одно и то же изображение для разных кнопок, каждая из которых показывает собственную метку.

Демонстрация :

Эти кнопки из галереи Free Button, см. ссылку в приложении.

Исходный код:

  <div class="buttonbar">
  <button type="image" class="button" onClick="clickhome(this)">Home</button>
  <button type="image" class="button" onClick="clickexit(this)">Exit</button>  
  </div>

Код CSS:

.button
{
  position:relative;
  background-image:url(image/cosmic-gel-light.gif);
  border:none;
  width:111px;
  height:32px;
  color:white;
}
.button:hover
{
  background-image:url(image/cosmic-gel-dark.gif);
}
.button:active
{
  top: 1px;
  left:1px; 
}
.buttonbar
{
  padding:4px;
  margin:2px;
}

Использовать теги <а>

Это имеет те же преимущества, что и кнопка, и подходит, когда кнопка предназначена для загрузки другой страницы.

Используется техника, реализуемая Free Web Button, сайт которой связан в приложении: одно изображение содержит обе версии кнопки, нормальное изображение и более темное изображение, которое будет отображаться при переходе мыши на кнопку. Свойство стиля смещает изображение в зависимости от состояния кнопки, то есть в зависимости от движения мыши.

Демонстрация:

Исходный код:

<div id="button-bioloide"><a  href="#"></a></div>

Код CSS:

#button-bioloide a
{
  display:block;
  width:116px;
  height:34px;
  background-image:url(image/button-bioloide.png);
} 
#button-bioloide a:hover
{
  background-position:left bottom;
}

Изменяя выравнивание фона со свойством background-position, видимое изображение меняется. Значение left является значением по умолчанию и не меняется, только при наведении мыши значение bottom заменяет значение по умолчанию top.

Ссылка: Свойства элемента кнопки изображения

Собственность Функция
имя Имя, которое используется для передачи данных формы
src URL-адрес изображения
высота Высота изображения
width Ширина изображения
стиль Личный стиль. Таблица стилей применяется ко всем кнопкам изображения.
alt Текст, соответствующий функции, чтобы облегчить доступ.

Устаревшие атрибуты :

Инструменты и изображения

Также можно создать кнопку с тегом canvas или с помощью SVG. Но если ты предпочитаешь использовать предустановленные элементы, их могут предоставить несколько источников :