This is the code currently, I've tried adding target="_Blank" but it still opens in the same tab.
We are using WordPress and this is the code we use in the text box for a button to appear.
button color="extra-color-1" hover_text_color_override="#ffffff" size="large" url="https://www.insideeducation.ca/learning-resources/classroom-learning-resources/elementary-school/#flying-animals-scavenger-hunt" text="Flying Animals | Scavenger Hunt"]
did you try anchor tag because i think target attribute works pretty well with anchor
I can't tell you that any of these approaches will work for sure, but there are three methods or workarounds I've thought of that you could try out.
1. Use target="_blank"
I would usually use lower case letters in target attributes. So instead of target="_Blank", you could try target="_blank".
However, this is more likely to be a matter of preference, and I think browsers will most likely accept both of these options.
2. Use some simple javascript
You could use the javascript window.open() function as a workaround for this problem.
Replace target="_Blank" with onclick="window.open('https://www.example.com')" and see if that works any better!
3. Use an anchor tag
At the moment, you seem to be using a button element which looks something like this:
<button color="extra-color-1" ... target="_blank" url="https://...">
Click here!
</button>
You could wrap an a tag around the button and instead apply the target attribute to that. It may be that target attributes work better directly on anchor tags. Here's what it would look like:
<a href="https://..." target="_blank">
<button color="extra-color-1" ... >
Click here!
</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
so basically I have this button that doesn't work, when I hover over it my cursor doesn't change and when I click it nothing happens, here's the buttons line of code:
<button href="dwr.php" class="dwrbutton fas fa-address-card"> <div class="dwrtext">DWR</div></button>
Href is not a button attribute.
https://www.w3schools.com/tags/tag_button.asp
Use a form with the link as action, or try a <A> tag with styling
add button class to anchor tag
<div class="dwrtext">DWR</div>
If you want to set a href on your button simply wrap it with an anchor element.
Your code should look something like this:
<button href="dwr.php" class="dwrbutton fas fa-address-card">DWR</button>
If you really need to use the button-tag, then you should look here for a solution to your problem. Especially preferred if you need the button-tag within a form.
If you don't care how the link is implemented, then I would personally use an a-tag, which you can then design according to your preferences, also like a button.
Have fun and good luck!
Is there any reason to use <a href> instead of <button> to display a button using foundation ?
It seems to work properly using <button>, but docs mention <a href> (http://foundation.zurb.com/docs/components/buttons.html). What are the consequence if I use <button> instead of <a href> ?
CSS Tricks answers this well here: http://css-tricks.com/use-button-element/
<button> is a form element and as such can't go to a link, but it can fire a form's action, for example.
My guess would be progressive enhancement. If (for whatever reason) Foundation fails to load on a user's device, an anchor tag with a link will still function as a link, while a button will not. This will allow the user to still use the website, which is an advantage :)
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" />
First I tried with
<input type="button" value="Something" onclick="location.href='#Url.Action("ActionName")'" />
But this is a button and I want just a link. I've seen somewhere (while wildly browsing the programming forums) a way to hide a button link behind an anchor, but couldn't find/make it.
Then I tried with
(here, actually, on the page, the link looked like Something">, whereas the " and > shouldn't be there)
and also
Something
but the latter 2 ways (with the anchor tag) don't work, by means, I don't get directed to the other page. So, any suggestions about how to hide a button behind a link, or how to make the anchor tags run ?
You want an anchor, but the suggested code doesn't work. Try this way (it worked for me):
<a onclick="location.href='#Url.Action("ActionName")'">Something</a><br />
It will work this way, but you will not have the hand, when you hover the link. So just add href="#", like that:
Something<br />
Use #Html.ActionLink("Something", "ActionName", "ControllerName") without the <a> tag. It's generated automatically
<a asp-action="Index">Location Name</a>