This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 1 year ago.
I was making my HTML and suddenly my button wouldn't work
<button class="button.hover:links" formaction="Link here">Next</button>
So how to make it work because ever since yesterday it wouldn't work
First I am not sure why you chose the formaction attribute as the destination URL to link there.
The button with the formaction attribute should be working inside <form> tag.
The formaction attribute specifies where to send the form-data when a form is submitted.
The formaction attribute is only used for buttons with type="submit".
If you want a button which link to a URL you should make a button inside the <a> tag.
<a href="your URL"> <button class="your class">HTML here</button> </>
Second, it doesn’t make sense you put a class name as a CSS recognizable string.
You should define CSS independently and import that to use. Or you can use style attribute to set inline CSS.
import "index.css"
<button class="myclass">
...
File index.css
button.myclass:hover{
// Your style
}
If you want to link something to a button, you can do something like this:
<a href="INSERT LINK HERE">
<button class="button.hover:links" formaction="HTML here">Next</button>
</a>
Related
Was wondering why when I clicked my button in html it wasn't responding later found out that it will only respond and redirect when I clicked the wording inside "Get Started" was wondering why. This is the code I'm using
<div class="main">
<div class="main__container">
<div class="main__content">
<h1>RAID 2 EARN</h1>
<h2>TECHNOLOGY</h2>
<p>We make it easy!</p>
<button class="main__btn">Get Started</button>
</div>
<div class="imgmain">
<img id="main__img" src="/IMGS/picture1.svg"/>
</div>
</div>
</div>
It is because you're actually clicking the anchor tag inside of the button and the button click doesn't have any actions associated with it. The size of the hyperlink is always only the size of its content. You should change your CSS to style your hyperlink to look like a button. Typically, you can do something like this:
<a class="main__btn" href="raid2earn.html">Get Started</a>
This way you're HTML spec compliant and your hyperlink is styled to look like a button but you're using default browser patterns to complete your action.
Your anchor tag is enclosing only the 'Get Started' text instead of the button. This way, only the text becomes a link
Actually, every html element has a job.
<a> for connecting to outer files
<button> for the inside actions
And you can style everyone as you want.
But:
if you still need to use the button and put the a inside and need to be able to click the button and do the action of the a, there are many many ways, some in html, some in css, and others in javascript.
In html, the easiest solution to your issue is to flip the elements, and make the a outside the button like that:
<a href="#">
<button>Click the button now</button>
</a>
This one is just the easiest.
And there are many others in html and css and javascript.
But again, you must use every element in its own purpose.
Sure you are putting a link tag inside a button because you want a button look and feel. just style your a element the way you want your button to look like as suggested above.
Cheers
This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 2 years ago.
I have been curious about the <button> attribute. I can't seem to get it to work like <a> attributes. What do I mean by that? Well, I can do Link to redirect you. But you can't do that with <button>. How can I make a button do the same?
Do you mean like this?
<button onclick="location.href='http://www.google.com/';">Go There!</button>
Well you can attach a button to a form and have it submit it which will load the page.
<form id="xxx" action="https://www.stackoverflow.com"></form>
<button form="xxx">Go now!</button>
You can try setting the <a> inside the <button> like this
<button>
Salir
</button>
I have a "migrated.html" page in root directory. How do I add that link to this CSS style button?
<button onclick="#" Migrated</button>
The above html code didn't work for me.
Here is the link to the code set:
https://codepen.io/prateek-vishwas/pen/Rwwpzjo
There are a few different ways to accomplish this.
But, from what I understand, it sounds like you just want an anchor <a> tag with a href attribute that is styled like this button.
You can simply just set the same class on the anchor tag that is on the button, so you should receive
<a href = "url-to-ur-page" class = glossy-button glossy-button--red>Migrated</a>
Why it has to be a button ? Why not use the normal "A" tag and style him like a button ?
<a href="migrated.html" class="glossy-button glossy-button--red">!!!Migrated!!!
</a>
Works in your codepen - ijust moved the migrated text inside the tag
This will work even without javascript.
Anyhow.the js to change the current url is
window.location = 'your url';
<button onclick="window.location='migrated.html';">
Migrated
</button>
which also work in your pen
This question already has answers here:
Link inside a button not working in Firefox
(7 answers)
Closed 5 years ago.
So, i am creating this webpage, that opens another page in the same directory on the click of a button.
While doing so, I observed something which I couldn't find an satisfactory explanation to.
The button code I am using is this
<a class="class1" href="webpage2.html"><button type="button">Button1</button></a>
this seems to work, but not this,
<button type="button"><a class="class1" href="webpage2.html">Button1</a></button>
Why is this so? (Am I missing something very simple?)
<a class="class1" href="webpage2.html"><button type="button">Button1</button></a>
and
<button type="button"><a class="class1" href="webpage2.html">Button1</a></button>
are different as one is a button inside an anchor tag...which means that, it is the anchor that gets clicked instead of the button, whereas, the second one,
is an anchor tag inside the button.
In the first case, it is the click event of the anchor tag that gets worked instead of the button. In the second case, it is the click action of the button that is working and not the click action of the anchor tag. Thus, the href to webpage2.html doesnt work.
I have used <a> tag inside <div> which is not working in IE
my code structure is like :
<div>
<a target="_top" href="address">
<button>
</button>
</a>
</div>
So It is working fine in all browsers except IE.
When I click on button it is not redirected to specified url from tag.
What you are doing is not recommended - don't wrap a button in a link. Style your link like a button or use an onclick:
<button onclick="window.open(href);">
</button>
(Addendum: Just for accessibility, don't use target on your links since it messes with people who use screen readers. Only apply a target after page load when there is javascript available. Also, people like to control where their new page opens - it's not something you should try to dictate too much.)
button tag is only allowed within a <form> tag. Since there is no form, IE is ignoring this. Other browser have a more defensive "do what I mean" parser probably ...
You might do it like this:
<input type="button" onClick="document.location='address'; return false" value="click me" />