Advertisements
How to create an HTML button that acts like a link
Topic: HTML / CSSPrev|Next
Answer: Use the Submit button
In case if you do not have option to use an <a> element then you can use the submit button inside a <form> where the value of the action attribute is set to the desired URL.
Let's try out the following example to understand how it basically works:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Make HTML Button Act Like a Link</title>
<style>
form {
/* To keep the form in flow with the surrounding text */
display: inline;
}
</style>
</head>
<body>
<form action="https://www.google.com/">
<input type="submit" value="Go to Google">
</form>
</body>
</html>However, if you can use the element of your choice then you should better use an anchor element (<a>) and style it using the CSS properties to make it look like a button, like this:
Example
Try this code »<!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>Related FAQ
Here are some more FAQ related to this topic:
- How to remove dotted line around the links using CSS
- How to animate background-color of an element on mouse hover using CSS
- How to disable a link using only CSS
Advertisements
