jivo banner 468x60jivo banner 728x90jivo banner 930x180etxt banner 468x60etxt banner 728x90etxt banner 930x180flexbe banner 468x60flexbe banner 728x90flexbe banner 930x180

Как создать кнопку в HTML-форме, которая будет работать как ссылка

В случае, если у вас нет возможности использовать элемент <a>, вы можете использовать кнопку submit внутри формы <form>, где значение атрибута action установлено на желаемый URL.

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make HTML Button Act Like a Link</title>
<style>
    form {
        /* Чтобы форма соответствовала окружающему тексту */
        display: inline;
    }
</style>
</head>
<body>
    <form action="https://www.google.com/">
        <input type="submit" value="Go to Google">
    </form>
</body>
</html>

Однако, если вы можете использовать элемент по вашему выбору, вам лучше использовать элемент <a> и стилизовать его, используя CSS-свойства, чтобы он выглядел как кнопка, например:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make HTML Link Look Like a Button</title>
<style>
    a.link-btn {
        color: #fff;
        background: #337ab7;
        display:inline-block;
        border: 1px solid #2e6da4;        
        font: bold 14px Arial, sans-serif;
        text-decoration: none;
        border-radius: 2px;
        padding: 6px 20px;
    }
    a.link-btn:hover {
        background-color: #245582;
        border-color: #1a3e5b;
    }
</style>
</head>
<body>
    <a href="https://google.com" class="link-btn">Go to Google</a>
</body>
</html>
flexbe banner 480x320flexbe banner 728x90flexbe banner 120x600kwork banner 480x320kwork banner 728x90kwork banner 120x600beget banner 480x320beget banner 728x90beget banner 120x600

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.

Похожие посты

Как добавить CSS стили к элементу с дата атрибутом в HTML

Чтобы добавить CSS к <div> с определённым data атрибутом, можно использовать селектор атрибутов в вашем CSS-файле. Вот как это сделать: Объяснение Пример Вот пример, который добавляет стили к вашему <div>: В этом примере <div> с атрибутом data-container=»outer» будет иметь светло-серый фон, рамку и отступы. Текст внутри <div> будет выровнен по центру.
Подробнее

Как анимировать фоновый цвет элемента при наведении курсора мыши с помощью CSS

Вы можете использовать CSS-свойство transition, чтобы плавно анимировать background-color элемента при наведении курсора мыши. Давайте посмотрим пример, чтобы понять, как это работает:
Подробнее