$47.19

Is it possible to create an HTML button that acts like a link?

Ask a question+
19

I am trying to create an HTML button that acts as a link. I would like that after clicking the button will redirect to a page. I want to be as accessible as possible. I would also like it, so there aren’t any extra characters or parameters in the URL.
Can anyone please help me with, Suggestions will be very helpful.

Alvard 920
add comment

10 Answers

5

You can try onclick Event. The onclick event attribute works when the user click on the button. When mouse clicked on the button then the button acts like a link and redirect page.

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
        Create an HTML button that 
        acts like a link 
    </title> 
    <!-- Style to create button -->
    <style> 
        .std { 
            background-color: white; 
            border: 2px solid black; 
            color: green; 
            padding: 5px 10px; 
            text-align: center; 
            display: inline-block; 
            font-size: 20px; 
            margin: 10px 30px; 
            cursor: pointer; 
        } 
    </style> 
</head> 
<body> 
    <h1>stackdev</h1> 
    <!-- Adding link to the button on the onclick event -->
    <button class="std" 
    onclick="window.location.href = 'https://stackdev.io';"> 
        Click Here 
    </button> 
</body>

Source: W3docs

Oliver 690
add comment
0

<button type="submit" formaction="register.html">Join Now</button>

add comment
0

This is the simplest and most straightforward approach so far:

<button type="submit" formaction="register.html">Join Now</button>
add comment
0
<html>
<head>
<title>Hyperlink Button</title>
</head>
<body>
<input type="button" onclick="window.location.href='Your document address or anything u want to show';" value="image">
</body>
</html>
add comment
0

Make a button type submit inside a form which has action=”URL” like this

<form action="https://stackdev.io">
<button type="submit">Stackdev.io</button>
</form>

Jsme Wuči 0
add comment
0

Create button type= “submit” inside form with action = “URL” like this ->

<form action="https://stackdev.io">
<button type="submit">Stackdev.io</button>
</form>

Jsme Wuči 0
add comment
0

You can try inline onclick events:-

<input type="button" onclick="window.location.href = 'https://www.w3docs.com';" value="w3docs"/>
add comment
1

If you are using an inside form, add the attribute type=”reset” along with the button element. It will prevent the form of action.

<button type="reset" onclick="location.href='https://stackdev.io' ">
    www.stackdev.io
</button>
Muhamed Aziz 320
add comment
3

I usually use this method, which create a simple anchor tag link and then apply some CSS property to makes it like a button.

<!DOCTYPE html> 
<html> 

<head> 
    <title> 
        Create an HTML button that 
        acts like a link 
    </title> 

    <!-- Style to create button -->
    <style> 
        .btn { 
            background-color: white; 
            border: 2px solid black; 
            color: green; 
            padding: 5px 10px; 
            text-align: center; 
            display: inline-block; 
            font-size: 20px; 
            margin: 10px 30px; 
            cursor: pointer; 
            text-decoration:none; 
        } 
    </style> 
</head> 

<body> 
    <h1>stackdev</h1> 

    <!-- Create a normal link and add CSS property -->
    <a href="https://stackdev.io/" class="btn"> 
        Click here 
    </a> 
</body> 

</html>
Sargsyan 415
add comment
2

If you want to create a button that is used for a URL anywhere, create a button class for an anchor.

a.button {
    background-color: #999999;
    color: #FFFFFF !important;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    padding: 5px 8px;
    text-align: center;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
.button:hover {
    text-decoration: none;
}
Jack 590
add comment

Your Answer