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.
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 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
I have come across a problem with nesting two anchor tags in HTML. Nesting within anchor tags is not allowed, so I tried to workaround it by changing my first a attribute to div. Funcionality did not change, the link is highlighted and has correct link, however after clicking on the text first href triggers. Is there any way to workaround this kind of problem?
<div href="#collapse'.$x.'" class="list-group-item list-group-item-info" data-toggle="collapse" data-parent="#affix_sidebar">
'.$cat_name.'
<span class="glyphicon glyphicon-plus floating_glyphicon"></span>
</div>
What a first href does, is that it triggers a accordion like submenu (shown in image). I tried to change the first href attribute not to be in a anchor tag, but I failed. Second anchor tag (the text) should be link for another page. Attaching picture for better explanation.
EDIT://
I have though about linking the first href action to the glyphicon only, leaving a attribute only for the text. My attempts are failing so far, but if anybody would know how to help in this direction I would be thankful.
enter link description hereIf you are trying to create drop-down menus, with clickable links, look at the source-code for:
[Dropdownmenus][1]
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/