Q&A for How to Make a HTML Link Button

Return to Full Article

Coming soon

Add New Question

Question

How I create a button like Merch that takes people to another page?

Community Answer

Follow the steps in the article, but change the text of the button and the link to whatever you need.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 3 Helpful 9
Question

How do I create a button on an HTML page?

Community Answer

Type: button text. It should work.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 20 Helpful 7
Question

Is there a way for the button to send more than one link?

Community Answer

No, a button can only do one job. Think of a volume switch on a phone. You can't get that button to turn the volume up, and turn the phone on, and make a call, all at once. The button can only have one job. Add more buttons as needed.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 4 Helpful 3
Question

I got the 404 error. What do I do?

Free Eagle

Community Answer

You got the 404 error because the link to the button, picture, etc is wrong. Check the link URL. It should be to a page you already created. Make sure you link code includes h t t p or h t t p s.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 3
Question

How do I make the button bigger or change the colour?

Free Eagle

Community Answer

Your button is no more then an image with text and or a link attached to it. To make the button bigger After the image code quotes, but before the link close tag </a> type a space followed by width="300" height="40" border="0". Changing these numbers will change you button size. If you add numbers to the border you will have a border around the button as wide as you state in pixels. To change the color, change the image to the color you want.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 1 Helpful 3
Question

After I change the code, I am left with just code in a text editor, nothing else. How do I test the link? Is this page missing a step?

Community Answer

So save the file with a .html at the end, then open the file, it should open in chrome or whatever your default web browser is. Here you can see the edits. If you want to change something. Edit it on your editing software, save, and then reload the webpage

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 2 Helpful 0
Question

I want the button (on click) to decrease a variable and open a link in the background. How do I do this?

Stockriderj

Community Answer

To do this, the button must contain an <a> element (no is needed). Your code should look something like: <a href="[your link here]" target="_blank">My link</a> The target="_blank" opens up a new tab going to the link specified in the href="". Then in JavaScript, the simplest way would be: var x = 100; document.querySelector("button").onclick = () => { x -= [decrease by]; }

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

I made the button work perfectly! But can't I make it colored and edit its size as it looks bad?

Stockriderj

Community Answer

In HTML, you can use inline styles. For example: "ADGJAKLSDHLAL:SJDLKMVL". However, inline styles are not efficient, and it is recommended to use CSS instead. Therefore, the best way is to link an external CSS file before your main code. And then to code the CSS, you'd have to learn it.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

How do you center the button?

Stockriderj

Community Answer

To center the button horizontally without any external files, just add 'style="text-align: center"' in the button tag. That means your code should look something like this: I am centered!

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

How do I add hover, visitation links, and appropriate colors to the button?

Stockriderj

Community Answer

You'd have to do that with CSS. The hover, color, etc. is very complicated, but in a nutshell: button:hover { background-color: red; } That will make it turn red when hovered.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

What CSS tag do I use to style the button?

Stockriderj

Community Answer

In CSS, they're actually called selectors. And the select a button, it's actually very simple! Just do: button {} and put your styles in the curly brackets.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0
Question

Is there a way to style the button with CSS?

Stockriderj

Community Answer

Yes, there is! If you already have an element, you can just put the element inside. Then all your CSS code is linked! To style the button, you can use the selector: button {} But you can also add a class or id to the button for more specificity. To add an id: Class: Then to select them in CSS: #button {} (id) .button {} (class) . Note that IDs can only be used once while classes can be used as many times as you'd like. Then you can just enter the styles inside the curly brackets.

Thanks! We're glad this was helpful.
Thank you for your feedback.
If wikiHow has helped you, please consider a small contribution to support us in helping more readers like you. We’re committed to providing the world with free how-to resources, and even $1 helps us in our mission. Support wikiHow
Yes No

Not Helpful 0 Helpful 0