Нужно заменить кнопку на кнопку с кнопкой другого размера в немного другом положении

Question

Вот ссылка на пару кнопок, с которых я начинаю: http://imgur.com/DrpgE

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

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

Есть идеи?

Answer 1

Если я правильно понимаю ваш вопрос, это был мой огромный вопрос.

Прежде всего позвольте мне сказать, что я думаю, что вам нужно потерять идею о том, чтобы на самом деле «двигать» кнопку. Я бы сказал, что лучший способ создать эту иллюзию - это просто сделать два разных изображения (одного размера), одно с нажатой кнопкой.

Единственное, что вам нужно, это способ решить, какую картинку показывать. Если вы хотите создавать кнопки наведения, я нашел очень красивый и простой способ сделать их с помощью CSS. Вы можете сделать свою кнопку и дать ей класс (например, «mybutton»). В вашем CSS у вас будет не один, а два блока кода:

a.mybutton {
background: transparent url(/*image A url here*/) no-repeat left;
}

a.mybutton:hover, a.mybutton:active {
background: transparent url(/*image B url here*/) no-repeat right;
}

Таким образом, когда вы наводите курсор на ссылку, последний блок вступает в силу, отменяет первый, и изображение (которое я сделал фоном) изменится с A на B.

Важно также дать кнопке width и height, потому что иначе вы ее не увидите (!). Это нужно сделать только в верхнем блоке.

Также вы можете заметить, что если вы наведите курсор мыши на него в первый раз, изображение B должно будет загрузиться, заставляя его мерцать. Сейчас есть много грязных JavaScripts, которые могут это исправить, но я решаю эту проблему, объединяя изображения A и B в один файл и перемещая фон слева направо (или сверху вниз, в зависимости от того, что вам больше подходит) при зависании Это даст вам что-то вроде:

a.mybutton {
background: transparent url(/*image url here*/) no-repeat left;
}

a.mybutton:hover, a.mybutton:active {
background: transparent url(/*image url here*/) no-repeat right;
}

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

Возможно, вам стоит прочитать эту страницу по адресу w3schools.com .

Веб-сайт, на котором я использовал вышеописанные приемы для кнопок: didyoueverfeel.com .