Контур button

[Arhidiablo]

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

 

.menu button:hover { background:#86C129; color:#FFFFFF;}.menu button:active { background:#901D79;}.menu button:focus { border:none;}

Однако основная проблема, что после нажатия на кнопку появляется контур и пока не клацну мышкой в любом месте не исчезает, перебрал псевдоклассы не могу понять к чему относится этот контур. Также у меня сама кнопка заключена в ссылку:

<a href="#" title="Главная"><button>ГЛАВНАЯ</button></a>

Думал мб, что наследуется от гиперссылки однако просто кнопка без тега ссылки также себя ведет.

Вот так выглядит проблема http://jsfiddle.net/Arhidiablo/anZ7H/

 

 

 

Подскажите, что это может быть, голова уже не соображает ! Заранее благодарен!!

[SelenIT]

  On 12/23/2013 at 9:10 AM, Arhidiablo said:

Также у меня сама кнопка заключена в ссылку

Зачем??? Чем несчастная кнопка так провинилась, что ее мало того что в заключение, так еще и в ссылку? И какого результата вы ждали от такого загадочного действия?

[klierik]

  Quote

 

 

Однако основная проблема, что после нажатия на кнопку появляется контур и пока не клацну мышкой в любом месте не исчезает, перебрал псевдоклассы не могу понять к чему относится этот контур

Это outline и убирать его как раз таки не рекомендуется, так как это дает возможность "видеть" передвижение по странице, активным ее элементам, с помощью клавиатуры.

[Justnewone]

Можно убрать, но на onfocus в JS надо что-то повесить, типа цвет другой или еще что, в общем, нехорошо удобство пользования у посетителей отнимать.

[lexxcode]

Зачем там js? есть же :focus {}

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

[SelenIT]

Да, желтая линия убирается через outline:none (желательно при этом продублировать для :focus стиль для :hover-а).

 

Но вопрос, какого Хикси кнопка делает внутри ссылки (в нарушение всех спецификаций!), это не снимает

[Arhidiablo]

  On 12/23/2013 at 10:11 AM, SelenIT said:

Да, желтая линия убирается через outline:none (желательно при этом продублировать для :focus стиль для :hover-а).

 

Но вопрос, какого Хикси кнопка делает внутри ссылки (в нарушение всех спецификаций!), это не снимает

 

мм когда я читал материал по хтмлу понял, что button по сути своей является пустышкой по сравнению с кнопкой <input> - которая больше подходит для формы. По этому, в тег ссылки вставляю тег кнопки и при нажатии перекидывает куда нужно =) Если неправильно делаю буду рад почитать материал!! Посоветуйте! К примеру я сегодня серчил яндекс и гугл по своему вопросу и нигде про аутлайн не говорилось, хотя я сам придерживаюсь мнения, что если не нашел значит плохо искал.

 

Всем в этой теме пожизненный респект, буду знать про outline !!!

[SelenIT]

  On 12/23/2013 at 10:55 AM, Arhidiablo said:

когда я читал материал по хтмлу понял, что button по сути своей является пустышкой

Можно ссылку на такой материал (чтобы народ знал своих антигероев)?

 

На htmlbook.ru написано корректно: button - функционально почти полный аналог кнопке input, лишь позволяет использовать разметку внутри кнопки. А ссылка и так перекидывает куда нужно при нажатии, никаких дополнительных интерактивных элементов внутри ее не нужно (более того, нельзя - иначе у браузера может возникнуть когнитивный диссонанс).

[Arhidiablo]

  On 12/23/2013 at 11:02 AM, SelenIT said:

 

  On 12/23/2013 at 10:55 AM, Arhidiablo said:

когда я читал материал по хтмлу понял, что button по сути своей является пустышкой

Можно ссылку на такой материал (чтобы народ знал своих антигероев)?

 

На htmlbook.ru написано корректно: button - функционально почти полный аналог кнопке input, лишь позволяет использовать разметку внутри кнопки. А ссылка и так перекидывает куда нужно при нажатии, никаких дополнительных интерактивных элементов внутри ее не нужно (более того, нельзя - иначе у браузера может возникнуть когнитивный диссонанс).

 

 

Так ссылка получается не в нутри а снаружи объекта кнопки! а на той страничке я был там простые пустышки тобиш анимация проходит, а кнопка никуда не ведет =) вот вопрос как заставить при нажатии на объект кнопку отправить на др стр? я так понял, что правильно отправлять следует через форму?! (я чет запутался)

 

Материал если я не ошибаюсь по попову 

[klierik]

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

[SelenIT]

  On 12/23/2013 at 3:35 PM, Arhidiablo said:

ссылка получается не в нутри а снаружи объекта кнопки!

А должна быть не внутри и не снаружи, а вместо!

 

 

 

  On 12/23/2013 at 3:35 PM, Arhidiablo said:

как заставить при нажатии на объект кнопку отправить на др стр?

Неправильный вопрос. Правильно "Как стилизовать ссылку, чтобы она внешне выглядела, как кнопка?" А судя по примеру, даже это не требуется.

 

Ссылка и кнопка - два разных интерактивных элемента. Ссылка нужна для перехода к другому объекту (за очень редкими исключениями), а кнопка - для передачи странице какой-то команды (если это форма, такой командой может быть "Отправить" или "Очистить", если это, скажем, онлайн-калькулятор - "Пересчитать", и т.д.). Если нужно выполнять команду, не нужно никуда переходить, и наоборот. Поэтому кнопка и ссылка - вещи взаимоисключающие.