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

Question

У меня есть форма, в которой есть кнопка «Отправить» и якорь «Отмена». HTML это:

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

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

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

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

Answer 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>

Answer 2

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

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

Answer 3

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

Отправить пример

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

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

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

Answer 4

Использование 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>

Answer 5

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

разметка:

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

CSS:

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

Answer 6

HTML

<a href="#" class="button"> HOME </a>

CSS

.button { 
         background-color: #00CCFF;
         padding: 8px 16px;
         display: inline-block;
         text-decoration: none;
         color: #FFFFFF;
         border-radius: 3px;
}
.button:hover{ background-color: #0066FF;}

Смотреть учебник

https://youtu.be/euti4HAJJfk

Answer 7

Как насчет

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

Answer 8

Вместо этого измените стиль кнопки «Отправить» на якорный тег и отправьте, используя 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();
}

Answer 9

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

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

Answer 10

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

<button>Cancel</button>

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

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