How to create an HTML button that acts like a link?

1

I am currently stuck and help me ton this: How to create an HTML button that acts like a link?

2

Why not make a link that looks like a button?

But to answer your question, you could set up an event listener for the button and then call window.open() when the button is clicked. Not perfect I think

2 Likes
3

.button {
font: bold 11px Arial;
text-decoration: none;
background-color: #EEEEEE;
color: #333333;
padding: 2px 6px 2px 6px;
border-top: 1px solid #CCCCCC;
border-right: 1px solid #333333;
border-bottom: 1px solid #333333;
border-left: 1px solid #CCCCCC;
}

Example

I saved this file in .html but it is not looking like a button in my firefox browser

4

Usually what you would do is put an <A> tag inside the <button> itself. So it would look like
<button> <a href="www.yourlink.com">Name on The Button</a></button>
Does that help you? That’s how you make a button that acts as a link

1 Like
5

Works in chrome, but not in firefox

6

Thanks a ton @petercr and @kevcomedia , I got it with both of your help :slight_smile:

7

Also, I think a tags don’t like to be styled if they’re missing the href.

I tested your code in codepen, but my anchor had an href. It worked in FF. I didn’t need to wrap it in extra tags.

1 Like
8

Can u please share ur Code @DaveC?

9

The only thing I did differently was add an href (which was actually added automatically because I’m using Emmet for code expansion :stuck_out_tongue: ). The css was yours.

https://codepen.io/cloudsociety/pen/rwRgVQ?editors=1100

1 Like
10

If it doesn’t work in FF sometimes there’s a slight difference in browser CSS such as
-webkit-translate: and
-moz-translate
but I don’t think this is one of those. Maybe check the Mozilla Developers Network and see what they say about buttons. They are a Great Resource for all things #webdev and it’s all open source

1 Like
11

Thanks @DaveC for sharing ur Code :slight_smile:

12

Good info @petercr :gift:

1 Like
13

Also, you can shortcut your styles a little :wink: :

.button {
  font: bold 11px Arial;
  text-decoration: none;
  background-color: #eee; /* websafe colors can be shortened to 3 chars */
  color: #333;
  padding: 2px 6px; /* top/bottom left/right */
  border: 1px solid #CCC; /* style everything, then style the special cases */
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
14

If you use Bootstrap you can do :

<a href="#" class="btn btn-primary">Link Button</a>
1 Like