Создание тега привязки, чтобы он выглядел как кнопка отправки

У меня есть форма, где есть кнопка "Отправить" и якорь "Отмена". HTML:

<input type="submit" value="Submit" />
<a href="some_url">Cancel</a>

Я бы хотел, чтобы они выглядели и действовали одинаково. Ничего необычного, просто что-то похожее на то, как якорь "Спросить вопрос" выглядит на StackOverflow.

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

P.S. Я знаю, что я мог бы использовать вместо якоря и подключить событие onClick для перенаправления. На данный момент это почти принципиально, чтобы получить это право, используя якорь (плюс здесь есть соображения паука паутины).

Ответы

Ответ 1

Лучшее, что вы можете получить с помощью простых стилей, будет примерно таким:

.likeabutton {
    text-decoration: none; font: menu;
    display: inline-block; padding: 2px 8px;
    background: ButtonFace; color: ButtonText;
    border-style: solid; border-width: 2px;
    border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
}
.likeabutton:active {
    border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
}

(Возможно, с каким-то исправлением, чтобы остановить IE6-IE7, рассматривая сфокусированные кнопки как "активные".)

Это не обязательно будет выглядеть точно так же, как кнопки на рабочем столе; действительно, для многих тем для рабочего стола невозможно будет воспроизвести внешний вид кнопки в простом CSS.

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

.likeabutton {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    text-decoration: none; font: menu; color: ButtonText;
    display: inline-block; padding: 2px 8px;
}

К сожалению, как вы, возможно, догадались из префиксов, специфичных для браузера, это функция CSS3, которая еще не поддерживается везде. В частности, IE и Opera будут игнорировать его. Но если вы включаете другие стили в качестве резервной копии, браузеры, поддерживающие appearance, отбрасывают это свойство, предпочитая явные фоны и границы!

Что вы можете сделать, это использовать стили appearance, как указано выше, и, при необходимости, исправлять JavaScript, например:

<script type="text/javascript">
    var r= document.documentElement;
    if (!('appearance' in r || 'MozAppearance' in r || 'WebkitAppearance' in r)) {
        // add styles for background and border colours
        if (/* IE6 or IE7 */)
            // add mousedown, mouseup handlers to push the button in, if you can be bothered
        else
            // add styles for 'active' button
    }
</script>

Ответ 2

Надеюсь, это поможет.

<a href="url"><button>SomeText</button></a>

Ответ 3

Я предлагаю вам использовать как Input Submit/Button вместо якоря, так и поместить эту строку кода onClick="javascript:location.href = 'http://stackoverflow.com';" в эту кнопку ввода Submit/Button, которую вы хотите использовать как ссылку.

Добавить пример

<input type="submit" value="Submit" onClick="javascript:location.href = 'some_url';" />

Пример кнопки

<button type="button" onClick="javascript:location.href = 'some_url';" />Submit</button>

Ответ 4

Ссылки и входы - это очень разные вещи, используемые для самых разных целей. Похоже, вам нужна кнопка для отмены:

<button>Cancel</button>

Или, может быть, вход:

<input type="button" value="Cancel"/>

Ответ 5

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

разметка:

<button type="submit">
    <span>submit</span>
</button>
<a>cancel</a>

css:

button[type="submit"] {
    display: inline;
    border: none;
    padding: 0;
    background: none;
}

Ответ 6

Почему бы просто не использовать кнопку и вызвать URL-адрес с JavaScript?

<input type="button" value="Cancel" onclick="location.href='url.html';return false;" />

Ответ 8

Использование CSS:

.button {
    display: block;
    width: 115px;
    height: 25px;
    background: #4E9CAF;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-weight: bold;
}

<a href="some_url" class="button ">Cancel</a>

Ответ 9

Настройте свое изменение кнопкой "Отправить" на тег привязки и отправьте с помощью javascript:

<a class="link-button" href="javascript:submit();">Submit</a>
<a class="link-button" href="some_url">Cancel</a>

function submit() {
    var form = document.getElementById("form_id");
    form.submit();
}

Ответ 10

Как насчет

<a href="url"><input type="button" value="Cancel"></a>