This question already has answers here:
Chrome 65 blocks cross-origin <a download>. Client-side workaround to force download?
(2 answers)
Closed 3 years ago.
I need help. My download button:
<button type="button" download="logo.svg" href="[SVG_URL]">Download SVG</button>
it is supposed to download an .svg file, but the download attribute is not working. It only opens the file in a new tab. It happens with firefox and chrome also.
Here's the problem live.
You need to use an anchor tag to make something downloadable.
Like
<a href="/images/myw3schoolsimage.jpg" download>Click to Download</a>
But in case you want a button with a downloadable link, here is it
<button><a href="/images/myw3schoolsimage.jpg" download>Chick Here</a></button>
Just put the anchor tag with an attribute "download" inside a button.
To read more about anchor tags w3schools
In your case, as I saw from your site, use the code snippet below
<a type="button" class="btn btn-primary" download="https://cdn.glitch.com/63be2122-7b8d-4d1e-85a5-7d557ae54cc5%2FUPS.svg?1555285173725" href="" target="_blank">Download SVG</a>
Here, instead of putting the URL in href we are giving it to the download attribute.
Related
i've been editing a html website and want to add the a href tag to a button. Codewise everything seems well but the button doesn't do anything. Here the code:
a class="scroll btn btn-gradient btn-rounded btn-large" href="https://google.com" target="_blank">Visit google
Please help :(
Visit google
It looks like you forgot to close off the anchor tag.
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 make links with no href attribute accessible?
(2 answers)
Closed 5 years ago.
I have this link that looks more like a button - but whenever I am testing my tab navigation via keyboard - this link is never it and the user can't use it.
How can I make it ADA compliant and use aria to make it accessible via keyboard?
<div class="styles">
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
You have to add the tabindex attribute.
<a class="btn btn-primary" (click)="handlingClick($event)" id="addUser" tabindex="0">Add User</a>
The value 0 gives it a natural tab index based on the order of the DOM elements.
Here is some additional documentation.
Anchor elements are natively focusable. The reason that your link does not receive focus is because it doesn't have an href attribute.
Another way of approaching this problem would be to add a non-existent URL fragment identifier to the href attribute, like this:
<div class="styles">
<a class="btn btn-primary" href="#void" (click)="handlingClick($event)" id="addUser">Add User</a>
</div>
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.
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/