This question already has answers here:
How do I create an HTML button that acts like a link?
(35 answers)
Closed 7 years ago.
I've got two HTML pages, with one being an opening page for an application and the second being a login page. I have a button on the opening page and I want to be able to click on it and have it take me to the login page. How do I do this?
This will add a button and link it to the login page:
<a href="path_to_login_page">
<button>Take me to the login page</button>
</a>
Change path_to_login_page & Take me to the login page to customize the button. If you already have a customized button and want to use it:
<a href="path_to_login_page">
'Place your button here'
</a>
Personally I would just change the button to a standard anchor. You could still style the link to make it look like a button.
Go home
If the element really must remain a button, you could do this:
<button onclick="location.href='index.html'>Go home</button>
It's not exactly best practice, though.
THIS IS THE SHORTEST AND THE FASTEST WAY TO DO IT:
<a href="login-page.html">
<button> Login Page</button>
</a>
Run and Check it here: https://jsfiddle.net/2zov6q2v/14/
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 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>
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>
This question already has answers here:
How do I link to part of a page? (hash?)
(7 answers)
Closed 3 years ago.
I am creating a portfolio website for practice purpose.
index.html :
work.html :
In index.html, the three sections at bottom are images. On clicking either one, it redirects to work.html
In work.html , the three sections have separate ids as #website-container, #ui_ux-container & #business_cards-container. And the line is a normal <hr> tag.
My question is, since work.html will be a long page, how can I redirect to a particular section from one page to another ?
I tried doing :
<a target="#website-container" href="work.html">
<img src="websites.png">
</a>
but this opened the work.html on a separate tab. how can I make it open in same tab and in that particular section ?
if i get you right, you just have to change your code to
<a href="work.html#website-container">
<img src="websites.png">
</a>
so its an link with an anchor (directly after the "normal" url 'e.g. your-url.html#anchor')... if the ID is set correctly you'll directly jump to that position
Href should be work.html#website-container remove target
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.