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

**URL:** <https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336>\
**Category:** General\
**Created:** [July 15, 2017, 1:59pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336 "2017-07-15T13:59:36Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 1:59pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/1 "2017-07-15T13:59:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [July 15, 2017, 2:03pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/2 "2017-07-15T14:03:47Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 2:05pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/3 "2017-07-15T14:05:34Z")

</div>

.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

---

<div class="post-metadata">

**Author:** ![petercr](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/petercr/32/52343_2.png) [@petercr](https://forum.freecodecamp.org/u/petercr)\
**Post date:** [July 15, 2017, 2:07pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/4 "2017-07-15T14:07:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [July 15, 2017, 2:11pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/5 "2017-07-15T14:11:36Z")

</div>

Works in chrome, but not in firefox

---

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 2:12pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/6 "2017-07-15T14:12:44Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DaveC](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/davec/32/161518_2.png) [@DaveC](https://forum.freecodecamp.org/u/DaveC)\
**Post date:** [July 15, 2017, 2:19pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/7 "2017-07-15T14:19:43Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 2:23pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/8 "2017-07-15T14:23:48Z")

</div>

Can u please share ur Code @DaveC?

---

<div class="post-metadata">

**Author:** ![DaveC](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/davec/32/161518_2.png) [@DaveC](https://forum.freecodecamp.org/u/DaveC)\
**Post date:** [July 15, 2017, 2:30pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/9 "2017-07-15T14:30:33Z")

</div>

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

[https://codepen.io/cloudsociety/pen/rwRgVQ?editors=1100](https://codepen.io/cloudsociety/pen/rwRgVQ?editors=1100)

---

<div class="post-metadata">

**Author:** ![petercr](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/petercr/32/52343_2.png) [@petercr](https://forum.freecodecamp.org/u/petercr)\
**Post date:** [July 15, 2017, 2:32pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/10 "2017-07-15T14:32:35Z")

</div>

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](https://developer.mozilla.org/) and see what they say about buttons. They are a **_Great Resource_** for all things #webdev and it’s all open source

---

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 2:35pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/11 "2017-07-15T14:35:00Z")

</div>

Thanks @DaveC for sharing ur Code 🙂

---

<div class="post-metadata">

**Author:** ![SmartSan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/smartsan/32/161730_2.png) [@SmartSan](https://forum.freecodecamp.org/u/SmartSan)\
**Post date:** [July 15, 2017, 2:37pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/12 "2017-07-15T14:37:07Z")

</div>

Good info @petercr 🎁

---

<div class="post-metadata">

**Author:** ![DaveC](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/davec/32/161518_2.png) [@DaveC](https://forum.freecodecamp.org/u/DaveC)\
**Post date:** [July 15, 2017, 2:39pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/13 "2017-07-15T14:39:17Z")

</div>

Also, you can shortcut your styles a little 😉 :

```auto
.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;
}

```

---

<div class="post-metadata">

**Author:** ![Nkoyan](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/nkoyan/32/63650_2.png) [@Nkoyan](https://forum.freecodecamp.org/u/Nkoyan)\
**Post date:** [July 15, 2017, 2:51pm UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/14 "2017-07-15T14:51:15Z")

</div>

If you use Bootstrap you can do :

```auto
<a href="#" class="btn btn-primary">Link Button</a>

```

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 17, 2021, 9:36am UTC](https://forum.freecodecamp.org/t/how-to-create-an-html-button-that-acts-like-a-link/136336/15 "2021-01-17T09:36:58Z")

</div>


