Как сделать кнопку похожим на ссылку?
Мне нужно, чтобы кнопка выглядела как ссылка, используя CSS. Изменения сделаны, но когда я нажимаю на него, он показывает, как будто он нажат как кнопка. Любая идея, как удалить это, чтобы кнопка работала как ссылка даже при нажатии?
- WPF - Как создать кнопку изображения с шаблоном
- Обнаружить кнопку средней кнопки (кнопка прокрутки) с помощью jQuery
- Добавить параметр в событие Click Button
- Кнопка переключения текста в jquery
- Как добавить к моему андроидному приложению кнопку, чем нравится на странице facebook?
- Динамическая кнопка asp.net с обработчиком событий
- Кнопка Pygame с одним кликом
- Переопределить домашнюю и обратную кнопку - это случай, когда логическое значение true
HTML
CSS
button { background:none!important; color:inherit; border:none; padding:0!important; font: inherit; /*border is optional*/ border-bottom:1px solid #444; cursor: pointer; }
См. Демонстрацию (на JSfiddle)
Код принятого ответа работает в большинстве случаев, но чтобы получить кнопку, которая действительно ведет себя как ссылка, вам нужно немного больше кода. Особенно сложно получить стиль сфокусированных кнопок прямо на Firefox (Mozilla).
Следующий CSS гарантирует, что привязки и кнопки имеют одинаковые свойства CSS и ведут себя одинаково во всех распространенных браузерах:
button { align-items: normal; background-color: rgba(0,0,0,0); border-color: rgb(0, 0, 238); border-style: none; box-sizing: content-box; color: rgb(0, 0, 238); cursor: pointer; display: inline; font: inherit; height: auto; padding: 0; perspective-origin: 0 0; text-align: start; text-decoration: underline; transform-origin: 0 0; width: auto; -moz-appearance: none; -webkit-logical-height: 1em; /* Chrome ignores auto, so we have to use this hack to set the correct height */ -webkit-logical-width: auto; /* Chrome ignores auto, but here for completeness */ } /* Mozilla uses a pseudo-element to show focus on buttons, */ /* but anchors are highlighted via the focus pseudo-class. */ @supports (-moz-appearance:none) { /* Mozilla-only */ button::-moz-focus-inner { /* reset any predefined properties */ border: none; padding: 0; } button:focus { /* add outline to focus pseudo-class */ outline-style: dotted; outline-width: 1px; } }
Приведенный выше пример только изменяет элементы button для улучшения читаемости, но его можно легко расширить, чтобы изменить input[type="button"], input[type="submit"] и input[type="reset"] элементы input[type="reset"] . Вы также можете использовать class, если хотите, чтобы только определенные кнопки выглядели якорями.
Посмотрите этот JSFiddle для живой демонстрации.
Также обратите внимание, что это относится к стилю привязки по умолчанию к кнопкам (например, синий текст-цвет). Поэтому, если вы хотите изменить текстовый цвет или что-то еще из привязок и кнопок, вы должны сделать это после CSS выше.
Исходный код (см. Фрагмент) в этом ответе был совершенно другим и неполным.
/* Obsolete code! Please use the code of the updated answer. */ input[type="button"], input[type="button"]:focus, input[type="button"]:active, button, button:focus, button:active { /* Remove all decorations to look like normal text */ background: none; border: none; display: inline; font: inherit; margin: 0; padding: 0; outline: none; outline-offset: 0; /* Additional styles to look like a link */ color: blue; cursor: pointer; text-decoration: underline; } /* Remove extra space inside buttons in Firefox */ input[type="button"]::-moz-focus-inner, button::-moz-focus-inner { border: none; padding: 0; }
Если вы не против использования twitter bootstrap, я предлагаю вам просто использовать class ссылок .
попробуйте использовать псевдоссласт css :focus
input[type="button"], input[type="button"]:focus { /* your style goes here */ }
как для ссылок и использования событий onclick (вы не должны использовать встроенные javascript-обработчики событий, но для простоты я буду использовать их здесь):
watch and learn
с this.href вы даже можете получить доступ к цели ссылки в вашей функции. return false будет просто препятствовать браузерам следовать ссылке при нажатии.
если javascript отключен, ссылка будет работать как обычная ссылка и просто загрузить https://stackoverflow.com/questions/1367409/how-to-make-button-look-like-a-link/some/page.php если вы хотите, чтобы ваша ссылка была мертва, когда js отключен, используйте href="#"
Вы не можете стилизовать кнопки как надежные ссылки во всех браузерах. Я пробовал, но в некоторых браузерах всегда есть странные проблемы с заполнением, маржи или шрифтом. Либо жить, когда кнопка будет выглядеть как кнопка, либо использовать onClick и preventDefault для ссылки.
Вы можете достичь этого, используя простой css, как показано ниже.
button { overflow: visible; width: auto; } button.link { font-family: "Verdana" sans-serif; font-size: 1em; text-align: left; color: blue; background: none; margin: 0; padding: 0; border: none; cursor: pointer; -moz-user-select: text; /* override all your button styles here if there are any others */ } button.link span { text-decoration: underline; } button.link:hover span, button.link:focus span { color: black; }