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

Ask a question
16

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.

Coin iconoffer bounty
add comment

4 Answers

4

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>
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 action.

<button type="reset" onclick="location.href='https://stackdev.io' ">
    www.stackdev.io
</button>
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>
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;
}
add comment

Your Answer